/* ================================================================
   Krankenhausalarm.de · site.css  v20260608-kritis-enterprise
   Hospital Alarm Platform · WCAG AA · Mobile-First
   Farbwelt: Navy/Dunkelblau + Cyan + Grün + Amber
   ================================================================ */

/* ----------------------------------------------------------------
   Externe Font-Imports entfernt
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Design Tokens
   ---------------------------------------------------------------- */
:root {
  /* Core Brand – Hospital Navy Palette */
  --navy-900:  #0B1220;
  --navy-800:  #112240;
  --navy-700:  #1A1F2B;
  --navy-600:  #1e2d45;
  --navy-500:  #263650;
  --navy-400:  #344d6a;

  /* Accent Colors */
  --cyan:      #00B8D9;
  --cyan-dark: #0090ab;
  --cyan-glow: rgba(0,184,217,.18);
  --green:     #00C853;
  --green-dark:#00a845;
  --green-glow:rgba(0,200,83,.18);
  --amber:     #FFB300;
  --amber-glow:rgba(255,179,0,.18);
  --red:       #FF1744;
  --red-glow:  rgba(255,23,68,.18);

  /* Surface / Light Mode */
  --bg:        #F4F8FC;
  --surface:   #FFFFFF;
  --surface-alt:#EEF4FA;
  --surface-mid:#E3EDF5;

  /* Text */
  --ink:       #0c1a2e;
  --ink-soft:  #374356;
  --muted:     #5e6e83;
  --subtle:    #8498ae;

  /* Borders */
  --line:      #cddde9;
  --line-soft: #e3edf5;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(11,18,32,.08);
  --shadow-md: 0 8px 28px rgba(11,18,32,.12);
  --shadow-lg: 0 20px 56px rgba(11,18,32,.16);
  --shadow-xl: 0 32px 80px rgba(11,18,32,.22);

  /* Radius */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;

  /* Status */
  --status-ok:     #00C853;
  --status-warn:   #FFB300;
  --status-crit:   #FF1744;
  --status-info:   #00B8D9;
  --status-idle:   #8498ae;

  /* Transitions */
  --t-fast:   .12s ease;
  --t-mid:    .2s ease;
  --t-slow:   .35s ease;
}

/* ----------------------------------------------------------------
   Reset & Base
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img  { display: block; max-width: 100%; }
svg  { fill: currentColor; }
a    { color: var(--cyan); }
a:hover { color: var(--cyan-dark); }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

code, .mono {
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

/* ----------------------------------------------------------------
   Skip Link
   ---------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  border: 2px solid var(--cyan);
  z-index: 9999;
}
.skip-link:focus { left: 12px; }

/* ================================================================
   SITE HEADER
   ================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 40px;
  min-height: 68px;
  background: rgba(11,18,32,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0,184,217,.15);
  box-shadow: 0 1px 20px rgba(0,0,0,.4);
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--cyan-dark), var(--cyan));
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -.02em;
  box-shadow: 0 4px 16px rgba(0,184,217,.4);
  flex-shrink: 0;
}

.brand strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #F8FAFC;
  line-height: 1.2;
}

.brand small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(0,184,217,.8);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 1px;
}

/* Nav */
.main-nav {
  display: flex;
  gap: 1px;
  margin-left: auto;
  align-items: center;
}

.main-nav a {
  padding: 8px 12px;
  border-radius: var(--r-xs);
  color: rgba(248,250,252,.6);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.main-nav a:hover,
.main-nav a.is-active {
  background: rgba(0,184,217,.12);
  color: var(--cyan);
}

/* Nav dropdown trigger */
.nav-has-dropdown { position: relative; }
.nav-has-dropdown > a::after {
  content: " ▾";
  font-size: 10px;
  opacity: .6;
}

/* Accessibility button in nav */
.nav-a11y-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-xs);
  color: rgba(248,250,252,.55);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  cursor: pointer;
  background: none;
  border: 1px solid rgba(255,255,255,.1);
  transition: all var(--t-fast);
}
.nav-a11y-btn:hover {
  background: rgba(0,184,217,.1);
  color: var(--cyan);
  border-color: rgba(0,184,217,.3);
}

/* Header CTA */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  background: var(--cyan);
  color: var(--navy-900);
  font-size: 13px;
  font-weight: 800;
  border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.01em;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 4px 16px rgba(0,184,217,.35);
  flex-shrink: 0;
  margin-left: 8px;
}
.header-cta:hover {
  background: #26d0f0;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0,184,217,.5);
  color: var(--navy-900);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font: 600 13px/1 inherit;
  color: rgba(248,250,252,.7);
  cursor: pointer;
}

/* Status dot in header */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--green);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,200,83,.08);
  border: 1px solid rgba(0,200,83,.2);
  white-space: nowrap;
}
.status-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(0,200,83,.2);
  animation: pulse-dot 2.4s infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,200,83,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(0,200,83,0); }
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-md);
  font: 700 15px/1.2 inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t-mid);
  white-space: nowrap;
  letter-spacing: -.01em;
}

.btn-primary {
  background: var(--cyan);
  color: var(--navy-900);
  box-shadow: 0 8px 28px rgba(0,184,217,.3);
}
.btn-primary:hover {
  background: #26d0f0;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(0,184,217,.45);
  color: var(--navy-900);
}

.btn-secondary {
  background: transparent;
  color: var(--cyan);
  border: 1.5px solid rgba(0,184,217,.4);
}
.btn-secondary:hover {
  background: rgba(0,184,217,.08);
  border-color: var(--cyan);
  transform: translateY(-1px);
  color: var(--cyan);
}

.btn-on-dark {
  background: rgba(255,255,255,.08);
  color: #F8FAFC;
  border: 1.5px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
}
.btn-on-dark:hover {
  background: rgba(255,255,255,.15);
  transform: translateY(-1px);
  color: #F8FAFC;
}

.btn-light {
  background: #fff;
  color: var(--navy-900);
  box-shadow: var(--shadow-md);
  font-weight: 800;
}
.btn-light:hover {
  background: var(--surface-alt);
  transform: translateY(-2px);
  color: var(--navy-900);
}

.btn-green {
  background: var(--green);
  color: var(--navy-900);
  box-shadow: 0 6px 22px rgba(0,200,83,.28);
}
.btn-green:hover {
  background: #26e870;
  transform: translateY(-2px);
  color: var(--navy-900);
}

.btn-sm {
  padding: 9px 16px;
  font-size: 13px;
  border-radius: var(--r-sm);
}

/* ================================================================
   TYPOGRAPHY HELPERS
   ================================================================ */
h1 {
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -.055em;
  color: var(--ink);
  font-weight: 900;
}

h2 {
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--ink);
  font-weight: 800;
}

h3 {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
  font-weight: 700;
}

h4 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.eyebrow,
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--cyan);
  margin-bottom: 16px;
}

.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.section-head p {
  color: var(--muted);
  font-size: 17px;
  margin-top: 12px;
  line-height: 1.65;
}
.section-head h2 { color: var(--ink); }

/* Dark section overrides */
.dark-section .section-head h2,
.dark-section h2,
.dark-section h3 { color: #F8FAFC; }
.dark-section .section-head p,
.dark-section p,
.dark-section .muted { color: rgba(200,220,240,.65); }
.dark-section .section-label,
.dark-section .eyebrow { color: var(--cyan); }

.legal-note {
  font-size: 11.5px;
  color: rgba(200,220,240,.5);
  margin-top: 24px;
  line-height: 1.6;
  max-width: 600px;
}

/* ================================================================
   HERO – LEITSTELLEN COMMAND CENTER
   ================================================================ */
.hero-command {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--navy-900);
}

/* Grid lines background */
.hero-command::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,184,217,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,184,217,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Radial glow */
.hero-command::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 60%,
    rgba(0,184,217,.07), transparent 65%);
  pointer-events: none;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero-mobile-alarm.jpg');
  background-size: cover;
  background-position: 80% 50%;
  opacity: .07;
}

.hero-command__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-copy { max-width: 620px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
}

.hero-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(0,200,83,.1);
  border: 1px solid rgba(0,200,83,.25);
  padding: 5px 10px;
  border-radius: 999px;
}
.hero-live-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 2s infinite;
}

.hero-command h1 {
  color: #F8FAFC;
  margin-bottom: 6px;
}

.hero-command h1 .accent {
  color: var(--cyan);
  display: block;
}

.hero-subtitle {
  font-size: 19px;
  line-height: 1.65;
  color: rgba(200,220,240,.75);
  margin: 16px 0 32px;
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.hero-trust-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 6px 13px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(200,220,240,.75);
  backdrop-filter: blur(6px);
}

/* Hero Dashboard Mock */
.hero-dashboard {
  background: var(--navy-800);
  border: 1px solid rgba(0,184,217,.2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(0,184,217,.1);
}

.hd-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(0,184,217,.12);
}

.hd-dots {
  display: flex;
  gap: 5px;
}
.hd-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.hd-dots span:nth-child(1) { background: #ff5f57; }
.hd-dots span:nth-child(2) { background: #ffbd2e; }
.hd-dots span:nth-child(3) { background: #28c840; }

.hd-title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,184,217,.6);
}

.hd-time {
  font-size: 11px;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  color: var(--green);
  font-weight: 700;
}

.hd-body { padding: 16px; }

/* KPI row */
.hd-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.hd-kpi {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}

.hd-kpi-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(200,220,240,.45);
  margin-bottom: 4px;
}

.hd-kpi-val {
  font-size: 20px;
  font-weight: 900;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  color: #F8FAFC;
  letter-spacing: -.03em;
  line-height: 1;
}

.hd-kpi-val.ok    { color: var(--green); }
.hd-kpi-val.cyan  { color: var(--cyan); }
.hd-kpi-val.amber { color: var(--amber); }

.hd-kpi-delta {
  font-size: 9px;
  font-weight: 700;
  color: var(--green);
  margin-top: 2px;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

/* Alarm list */
.hd-alarm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.hd-alarm-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(200,220,240,.5);
}

.hd-alarm-badge {
  font-size: 9px;
  font-weight: 800;
  background: rgba(255,23,68,.15);
  color: #ff6680;
  border: 1px solid rgba(255,23,68,.3);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: .04em;
}

.hd-alarm-list { display: grid; gap: 5px; margin-bottom: 12px; }

.hd-alarm-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 8px;
  align-items: center;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--r-xs);
  padding: 8px 10px;
}

.hd-alarm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hd-alarm-dot.active   { background: var(--red);   box-shadow: 0 0 6px var(--red); }
.hd-alarm-dot.pending  { background: var(--amber);  box-shadow: 0 0 6px var(--amber); }
.hd-alarm-dot.resolved { background: var(--green); }

.hd-alarm-name {
  font-size: 11px;
  font-weight: 700;
  color: #F8FAFC;
}

.hd-alarm-sub {
  font-size: 9px;
  color: rgba(200,220,240,.45);
  margin-top: 1px;
}

.hd-alarm-status {
  font-size: 9px;
  font-weight: 800;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  padding: 2px 7px;
  border-radius: 999px;
}
.hd-alarm-status.active   { background: rgba(255,23,68,.12);  color: #ff6680;  border: 1px solid rgba(255,23,68,.25); }
.hd-alarm-status.pending  { background: rgba(255,179,0,.12);   color: var(--amber); border: 1px solid rgba(255,179,0,.25); }
.hd-alarm-status.resolved { background: rgba(0,200,83,.12);   color: var(--green); border: 1px solid rgba(0,200,83,.25); }

/* Progress bar */
.hd-progress {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(0,184,217,.12);
  border-radius: var(--r-xs);
  padding: 10px 12px;
}

.hd-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(200,220,240,.5);
  margin-bottom: 6px;
}

.hd-progress-pct {
  color: var(--cyan);
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

.hd-progress-bar {
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
}

.hd-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan-dark), var(--cyan));
  box-shadow: 0 0 8px rgba(0,184,217,.5);
  animation: progress-fill 2.5s ease-out forwards;
}

@keyframes progress-fill {
  from { width: 0; }
}

/* ================================================================
   SECTION BASE
   ================================================================ */
.section {
  padding: 96px 40px;
}

.section--dark {
  background: var(--navy-900);
  padding: 96px 40px;
}

.section--navy {
  background: var(--navy-800);
  padding: 96px 40px;
}

.section--alt {
  background: var(--surface-alt);
  padding: 96px 40px;
}

.section--white {
  background: var(--surface);
  padding: 96px 40px;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
}

/* ================================================================
   KPI STATS SECTION
   ================================================================ */
.kpi-section {
  background: var(--navy-800);
  border-top: 1px solid rgba(0,184,217,.12);
  border-bottom: 1px solid rgba(0,184,217,.12);
  padding: 64px 40px;
}

.kpi-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.kpi-card {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(0,184,217,.1);
  padding: 32px 28px;
  text-align: center;
  position: relative;
  transition: background var(--t-mid), border-color var(--t-mid);
}
.kpi-card:hover {
  background: rgba(0,184,217,.05);
  border-color: rgba(0,184,217,.25);
}

.kpi-card:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.kpi-card:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }

.kpi-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  opacity: .5;
}

.kpi-val {
  font-size: 42px;
  font-weight: 900;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  letter-spacing: -.06em;
  line-height: 1;
  margin-bottom: 6px;
  color: #F8FAFC;
}

.kpi-val .unit {
  font-size: 22px;
  font-weight: 700;
  color: var(--cyan);
}

.kpi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(200,220,240,.5);
}

.kpi-sub {
  font-size: 11px;
  color: var(--green);
  font-weight: 700;
  margin-top: 4px;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

/* ================================================================
   FEATURE CARDS
   ================================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1240px;
  margin: 0 auto;
}

.feat-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: all var(--t-mid);
  position: relative;
  overflow: hidden;
}

.feat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: 0;
  transition: opacity var(--t-mid);
}

.feat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: rgba(0,184,217,.2);
}

.feat-card:hover::before { opacity: 1; }

.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: rgba(0,184,217,.08);
  border: 1px solid rgba(0,184,217,.15);
  margin-bottom: 18px;
  font-size: 20px;
}

.feat-num {
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: .08em;
  margin-bottom: 8px;
  opacity: .7;
}

.feat-card h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--navy-800);
}

.feat-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* Dark variant */
.feat-card--dark {
  background: rgba(255,255,255,.04);
  border-color: rgba(0,184,217,.12);
}
.feat-card--dark h3  { color: #F8FAFC; }
.feat-card--dark p   { color: rgba(200,220,240,.6); }
.feat-card--dark:hover { background: rgba(0,184,217,.06); }

/* ================================================================
   TIMELINE
   ================================================================ */
.timeline-section {
  background: var(--surface-alt);
}

.timeline-split {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 64px;
  align-items: start;
}

.timeline-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.tl-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: all var(--t-mid);
  position: relative;
}

.tl-item:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(0,184,217,.2);
  transform: translateX(4px);
}

.tl-num {
  grid-row: span 2;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 18px;
  font-weight: 900;
  color: var(--cyan);
  align-self: center;
  justify-self: center;
  opacity: .7;
}

.tl-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-800);
  line-height: 1.3;
}

.tl-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 3px;
}

/* ================================================================
   MODULE GRID (Products)
   ================================================================ */
.module-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.module-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(0,184,217,.1);
  border-radius: var(--r-md);
  padding: 20px 20px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all var(--t-mid);
  cursor: default;
}

.module-card:hover {
  background: rgba(0,184,217,.07);
  border-color: rgba(0,184,217,.25);
  transform: translateY(-2px);
}

.module-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  width: 36px;
  text-align: center;
}

.module-name {
  font-size: 14px;
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.module-desc {
  font-size: 12px;
  color: rgba(200,220,240,.5);
  line-height: 1.5;
  margin-top: 3px;
}

.module-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(0,184,217,.12);
  color: var(--cyan);
  border: 1px solid rgba(0,184,217,.2);
  padding: 2px 6px;
  border-radius: 999px;
  margin-top: 5px;
}

.module-badge.new { background: rgba(0,200,83,.12); color: var(--green); border-color: rgba(0,200,83,.2); }

/* ================================================================
   COMPLIANCE SECTION
   ================================================================ */
.compliance-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.compliance-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--t-mid);
}

.compliance-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.compliance-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
}

.compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,184,217,.08);
  border: 1px solid rgba(0,184,217,.18);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.compliance-card h3 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--navy-800);
}

.compliance-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

.compliance-checkmarks {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 7px;
}

.compliance-checkmarks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 600;
}

.compliance-checkmarks li::before {
  content: "✓";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,200,83,.1);
  border: 1px solid rgba(0,200,83,.25);
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ================================================================
   TRANSPARENCY SECTION
   ================================================================ */
.transparency-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.transp-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(0,184,217,.12);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  transition: all var(--t-mid);
}

.transp-card:hover {
  background: rgba(0,184,217,.05);
  border-color: rgba(0,184,217,.25);
  transform: translateY(-2px);
}

.transp-card-icon {
  font-size: 28px;
  margin-bottom: 16px;
}

.transp-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: #F8FAFC;
  margin-bottom: 8px;
}

.transp-card p {
  font-size: 13.5px;
  color: rgba(200,220,240,.55);
  line-height: 1.6;
}

.transp-disclaimer {
  text-align: center;
  margin-top: 40px;
  padding: 16px 24px;
  background: rgba(255,179,0,.06);
  border: 1px solid rgba(255,179,0,.15);
  border-radius: var(--r-md);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12.5px;
  color: rgba(200,220,240,.5);
  line-height: 1.65;
}

/* ================================================================
   LAGECOCKPIT SECTION
   ================================================================ */
.live-dashboard-wrapper {
  max-width: 1240px;
  margin: 0 auto;
}

.dashboard-shell {
  background: var(--navy-800);
  border: 1px solid rgba(0,184,217,.2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.db-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(0,184,217,.12);
}

.db-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.db-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,184,217,.7);
}

.db-time {
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  color: var(--green);
}

.db-body {
  padding: 24px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

/* Left: map+list */
.db-main { display: grid; gap: 14px; }

.db-map {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(0,184,217,.1);
  border-radius: var(--r-md);
  height: 180px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-map-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,184,217,.4);
  text-align: center;
}

/* Map grid lines */
.db-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,184,217,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,184,217,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Location pings */
.db-ping {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.db-ping::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .4;
  animation: ping-wave 2s infinite;
}
@keyframes ping-wave {
  0%   { transform: scale(.6); opacity: .6; }
  100% { transform: scale(2.2); opacity: 0; }
}
.db-ping.red   { background: var(--red);   color: var(--red); }
.db-ping.amber { background: var(--amber); color: var(--amber); }
.db-ping.green { background: var(--green); color: var(--green); }

.db-einsatz-list { display: grid; gap: 6px; }

.db-einsatz-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--r-xs);
  padding: 10px 14px;
}

.db-einsatz-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.db-einsatz-name {
  font-size: 12px;
  font-weight: 700;
  color: #F8FAFC;
}

.db-einsatz-unit {
  font-size: 10px;
  color: rgba(200,220,240,.45);
  margin-top: 1px;
}

.db-einsatz-time {
  font-size: 10px;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  color: rgba(200,220,240,.4);
}

.db-einsatz-pct {
  font-size: 10px;
  font-weight: 800;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

/* Right: stats */
.db-side { display: grid; gap: 10px; align-content: start; }

.db-stat {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}

.db-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(200,220,240,.4);
  margin-bottom: 6px;
}

.db-stat-val {
  font-size: 28px;
  font-weight: 900;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  letter-spacing: -.05em;
  line-height: 1;
}

.db-stat-sub {
  font-size: 10px;
  font-weight: 700;
  color: rgba(200,220,240,.4);
  margin-top: 3px;
}

/* Participant list */
.db-participants { display: grid; gap: 6px; }

.db-part-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  align-items: center;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--r-xs);
  padding: 8px 10px;
}

.db-part-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,184,217,.15);
  border: 1px solid rgba(0,184,217,.3);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  color: var(--cyan);
}

.db-part-name {
  font-size: 11px;
  font-weight: 700;
  color: #F8FAFC;
}

.db-part-role {
  font-size: 9px;
  color: rgba(200,220,240,.4);
}

.db-part-status {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 999px;
}
.db-part-status.ok     { background: rgba(0,200,83,.12); color: var(--green); border: 1px solid rgba(0,200,83,.25); }
.db-part-status.reject { background: rgba(255,23,68,.1); color: #ff6680; border: 1px solid rgba(255,23,68,.2); }
.db-part-status.wait   { background: rgba(255,179,0,.1); color: var(--amber); border: 1px solid rgba(255,179,0,.2); }

/* ================================================================
   REFERENCES
   ================================================================ */
.ref-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ref-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: all var(--t-mid);
  text-align: center;
}

.ref-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ref-icon {
  font-size: 32px;
  margin-bottom: 14px;
}

.ref-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy-800);
  margin-bottom: 4px;
}

.ref-sub {
  font-size: 12px;
  color: var(--muted);
}

/* ================================================================
   FAQ
   ================================================================ */
.faq-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-mid);
}

.faq-item:hover { border-color: rgba(0,184,217,.2); }
.faq-item.is-open { border-color: rgba(0,184,217,.3); }

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font: 700 15px/1.35 inherit;
  color: var(--navy-800);
  transition: color var(--t-fast);
}
.faq-q:hover { color: var(--cyan-dark); }
.faq-item.is-open .faq-q { color: var(--cyan-dark); }

.faq-q-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,184,217,.08);
  border: 1px solid rgba(0,184,217,.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--cyan);
  transition: background var(--t-fast), transform var(--t-mid);
}
.faq-item.is-open .faq-q-icon {
  background: rgba(0,184,217,.15);
  transform: rotate(45deg);
}

.faq-a {
  display: none;
  padding: 0 22px 18px 58px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.7;
}
.faq-item.is-open .faq-a { display: block; }

/* ================================================================
   CTA SECTION
   ================================================================ */
.cta-section {
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 60%);
  position: relative;
  overflow: hidden;
  padding: 96px 40px;
}

.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(0,184,217,.08), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 50%, rgba(0,200,83,.05), transparent 55%);
  pointer-events: none;
}

.cta-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cta-inner h2 { color: #F8FAFC; margin-bottom: 14px; }
.cta-inner p  { color: rgba(200,220,240,.65); font-size: 18px; margin-bottom: 32px; }

.cta-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================================================
   ACCESSIBILITY PANEL
   ================================================================ */
#a11y-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  height: 100vh;
  background: var(--navy-800);
  border-left: 1px solid rgba(0,184,217,.2);
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
  z-index: 1000;
  transition: right var(--t-slow);
  overflow-y: auto;
  padding: 28px 24px;
}

#a11y-panel.is-open { right: 0; }

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.a11y-panel-title {
  font-size: 15px;
  font-weight: 800;
  color: #F8FAFC;
}

.a11y-close {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-xs);
  padding: 8px 12px;
  color: rgba(248,250,252,.6);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.a11y-close:hover { background: rgba(255,255,255,.1); }

.a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.a11y-option-info { flex: 1; }

.a11y-option-title {
  font-size: 14px;
  font-weight: 700;
  color: #F8FAFC;
  line-height: 1.3;
}

.a11y-option-desc {
  font-size: 12px;
  color: rgba(200,220,240,.5);
  line-height: 1.4;
  margin-top: 2px;
}

/* Toggle switch */
.a11y-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-left: 14px;
}

.a11y-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.a11y-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast);
  border: 1px solid rgba(255,255,255,.15);
}
.a11y-toggle input:checked + .a11y-toggle-track {
  background: var(--cyan);
  border-color: var(--cyan);
}

.a11y-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--t-fast);
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.a11y-toggle input:checked + .a11y-toggle-track::after {
  transform: translateX(20px);
}

/* Accessibility mode overrides */
body.a11y-high-contrast {
  filter: contrast(1.5) brightness(.95);
}
body.a11y-large-text {
  font-size: 19px;
}
body.a11y-focus-mode {
  --bg: #fafafa;
}
body.a11y-reduce-motion * {
  animation: none !important;
  transition: none !important;
}
body.a11y-dyslexia {
  font-family: "Arial", sans-serif;
  letter-spacing: .04em;
  word-spacing: .1em;
  line-height: 1.9;
}

/* ================================================================
   COOKIE CONSENT
   ================================================================ */
#cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 680px;
  margin: 0 auto;
  z-index: 900;
  background: var(--navy-800);
  border: 1px solid rgba(0,184,217,.25);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  padding: 28px 30px;
  display: none;
  animation: slideUp .3s ease;
}

#cookie-banner.is-visible { display: block; }

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cookie-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.cookie-icon {
  font-size: 28px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cookie-title {
  font-size: 15px;
  font-weight: 800;
  color: #F8FAFC;
  margin-bottom: 6px;
}

.cookie-text {
  font-size: 13px;
  color: rgba(200,220,240,.6);
  line-height: 1.6;
}

.cookie-options {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.cookie-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}
.cookie-opt:hover { background: rgba(0,184,217,.06); border-color: rgba(0,184,217,.2); }

.cookie-opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--cyan);
  cursor: pointer;
}

.cookie-opt-label {
  font-size: 13px;
  font-weight: 700;
  color: #F8FAFC;
  flex: 1;
}

.cookie-opt-desc {
  font-size: 11px;
  color: rgba(200,220,240,.45);
}

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-actions .btn {
  flex: 1;
  min-width: 130px;
}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  background: var(--navy-900);
  border-top: 1px solid rgba(0,184,217,.1);
  padding: 48px 40px 32px;
}

.footer-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}

.footer-brand { }

.footer-brand-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  text-decoration: none;
}

.footer-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--cyan-dark), var(--cyan));
  color: #fff;
  font-weight: 900;
  font-size: 12px;
}

.footer-brand-title {
  font-size: 14px;
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: -.01em;
}

.footer-tagline {
  font-size: 13px;
  color: rgba(200,220,240,.45);
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 280px;
}

.footer-cert-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-cert {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-xs);
  background: rgba(0,184,217,.08);
  border: 1px solid rgba(0,184,217,.18);
  color: rgba(0,184,217,.8);
}

.footer-col-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,220,240,.4);
  margin-bottom: 14px;
}

.footer-col nav {
  display: grid;
  gap: 8px;
}

.footer-col nav a {
  font-size: 13px;
  font-weight: 600;
  color: rgba(200,220,240,.55);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer-col nav a:hover { color: var(--cyan); }

.footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.05);
}

.footer-legal {
  font-size: 11.5px;
  color: rgba(200,220,240,.3);
  line-height: 1.6;
}

.footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(200,220,240,.35);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--cyan); }

/* ================================================================
   LEGAL PAGES
   ================================================================ */
.legal-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 40px 80px;
}

.legal-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: 48px 52px;
  box-shadow: var(--shadow-md);
}

.legal-card h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; }
.legal-card h2 {
  font-size: 19px;
  margin: 32px 0 10px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  color: var(--navy-800);
}
.legal-card p,
.legal-card li { color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.legal-card ul,
.legal-card ol  { padding-left: 22px; margin: 10px 0 16px; }
.legal-card li  { margin-bottom: 5px; }
.legal-card a   { color: var(--cyan-dark); }

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}

.contact-box {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
}

.contact-box h1 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 14px; }
.contact-box p  { color: var(--ink-soft); font-size: 15px; line-height: 1.65; }

.placeholder {
  background: #f0f6ff;
  border: 1px solid #ccddf0;
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: 16px;
}

.contact-form label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 16px 0 5px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-glow);
}
.contact-form textarea { min-height: 130px; resize: vertical; }

.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.privacy-check {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 20px !important;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.privacy-check input { width: auto !important; margin-top: 3px; flex-shrink: 0; }
.privacy-check a { color: var(--cyan-dark); }

.form-status {
  border-radius: var(--r-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.form-status.ok  { background: #e9f8f0; color: #0f6d3b; border: 1px solid #b4e9cc; }
.form-status.err { background: #fff0f0; color: #b01828; border: 1px solid #ffd0d3; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1280px) {
  .kpi-grid         { grid-template-columns: repeat(3, 1fr); }
  .kpi-card:first-child { border-radius: var(--r-md) 0 0 0; }
  .kpi-card:nth-child(3) { border-radius: 0 var(--r-md) 0 0; }
  .kpi-card:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }

  .feature-grid   { grid-template-columns: repeat(2, 1fr); }
  .module-grid    { grid-template-columns: repeat(3, 1fr); }
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 1100px) {
  .site-header    { padding: 0 20px; }
  .hero-command__inner { grid-template-columns: 1fr; }
  .hero-dashboard { display: none; }
  .timeline-split { grid-template-columns: 1fr; }
  .compliance-grid { grid-template-columns: 1fr 1fr; }
  .transparency-grid { grid-template-columns: 1fr 1fr; }
  .ref-grid       { grid-template-columns: repeat(2, 1fr); }
  .db-body        { grid-template-columns: 1fr; }
  .contact-grid   { grid-template-columns: 1fr; }

  .main-nav {
    position: absolute;
    top: 72px;
    left: 12px;
    right: 12px;
    display: none;
    flex-direction: column;
    gap: 2px;
    background: var(--navy-800);
    border: 1px solid rgba(0,184,217,.15);
    border-radius: var(--r-md);
    padding: 10px;
    box-shadow: var(--shadow-xl);
    z-index: 200;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 11px 14px; font-size: 14px; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .status-dot { display: none; }
}

@media (max-width: 760px) {
  .section,
  .section--dark,
  .section--navy,
  .section--alt,
  .section--white,
  .kpi-section,
  .cta-section { padding-left: 18px; padding-right: 18px; }

  .kpi-grid         { grid-template-columns: 1fr 1fr; }
  .feature-grid     { grid-template-columns: 1fr; }
  .module-grid      { grid-template-columns: 1fr 1fr; }
  .compliance-grid  { grid-template-columns: 1fr; }
  .transparency-grid { grid-template-columns: 1fr; }
  .ref-grid         { grid-template-columns: 1fr 1fr; }
  .footer-grid      { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom    { flex-direction: column; align-items: flex-start; }

  .hero-command     { min-height: auto; }
  .hero-command__inner { padding: 60px 18px; }
  .hero-actions     { flex-direction: column; }
  .hero-actions .btn { width: 100%; }

  .hd-kpi-row       { grid-template-columns: 1fr 1fr; }

  h1 { font-size: 36px; }
  h2 { font-size: 26px; }

  .legal-card       { padding: 24px 20px; }
  .contact-box      { padding: 24px 20px; }

  #a11y-panel       { width: 100%; right: -100%; }

  #cookie-banner    { left: 12px; right: 12px; bottom: 12px; }

  .tl-item          { grid-template-columns: 1fr; gap: 4px; }
  .tl-num           { display: none; }
}

/* ================================================================
   HERO SCREENSHOT (real product image)
   ================================================================ */
.hero-screenshot-wrap {
  position: relative;
}

.hero-screenshot-frame {
  background: var(--navy-800);
  border: 1px solid rgba(0,184,217,.25);
  border-radius: var(--r-lg);
  overflow: visible;
  box-shadow:
    0 40px 100px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,184,217,.1);
  position: relative;
}

.hs-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(0,0,0,.4);
  border-bottom: 1px solid rgba(0,184,217,.12);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.hs-dots {
  display: flex;
  gap: 5px;
}
.hs-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.hs-dots span:nth-child(1) { background: #ff5f57; }
.hs-dots span:nth-child(2) { background: #ffbd2e; }
.hs-dots span:nth-child(3) { background: #28c840; }

.hs-title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,184,217,.55);
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

.hs-live {
  font-size: 10px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: .06em;
  animation: pulse-opacity 2s infinite;
}
@keyframes pulse-opacity {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.hs-image-wrap {
  margin: 0;
  overflow: hidden;
  border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  line-height: 0;
}

.hs-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Floating status badges over screenshot */
.hs-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(11,18,32,.92);
  border: 1px solid rgba(0,184,217,.3);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(200,220,240,.85);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  white-space: nowrap;
  z-index: 10;
}

.hs-badge--tl {
  top: 52px;
  left: -20px;
}

.hs-badge--br {
  bottom: 16px;
  right: -16px;
}

.hs-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hs-badge-dot.ok    { background: var(--green); box-shadow: 0 0 0 3px rgba(0,200,83,.2); }
.hs-badge-dot.amber { background: var(--amber); box-shadow: 0 0 0 3px rgba(255,179,0,.2); }

/* ================================================================
   MOBILE SPLIT SECTION
   ================================================================ */
.mobile-split-grid {
  display: grid;
  grid-template-columns: .52fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.mobile-phone-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.phone-outer-frame {
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: 40px;
  padding: 10px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  width: 100%;
  max-width: 300px;
}

.phone-outer-frame img {
  width: 100%;
  border-radius: 32px;
  display: block;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: center center;
}

.phone-caption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
}

.phone-caption-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(255,23,68,.15);
  animation: pulse-dot 2s infinite;
}

/* Mobile feature list */
.mobile-feat-list {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.mobile-feat-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0 14px;
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
  align-items: center;
  transition: all var(--t-mid);
}

.mobile-feat-item:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(0,184,217,.2);
}

.mf-num {
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
  color: var(--cyan);
  opacity: .7;
  justify-self: center;
}

.mobile-feat-item strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--navy-800);
  margin-bottom: 3px;
}

.mobile-feat-item span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Responsive adjustments for new sections */
@media (max-width: 1100px) {
  .mobile-split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .phone-outer-frame {
    max-width: 260px;
    margin: 0 auto;
  }
  .hs-badge--tl { left: 8px; }
  .hs-badge--br { right: 8px; }
}

@media (max-width: 760px) {
  .hs-badge { display: none; }
  .phone-outer-frame { max-width: 220px; }
}

/* ================================================================
   GLASSMORPHISM SYSTEM — Flüssige Glaseffekte
   ================================================================ */

/* ── Orb / Blob Hintergrund-Animationen ─────────────────────── */
.glass-orb-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.glass-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  animation: orb-float 14s ease-in-out infinite;
}

.glass-orb:nth-child(1) {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(0,184,217,.35), transparent 70%);
  top: -180px; left: -120px;
  animation-duration: 16s;
}
.glass-orb:nth-child(2) {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,200,83,.25), transparent 70%);
  bottom: -100px; right: -80px;
  animation-duration: 12s;
  animation-delay: -5s;
}
.glass-orb:nth-child(3) {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,184,217,.2), transparent 70%);
  top: 40%; left: 50%;
  animation-duration: 20s;
  animation-delay: -9s;
}

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%       { transform: translate(30px, -40px) scale(1.04); }
  50%       { transform: translate(-20px, 30px) scale(.96); }
  75%       { transform: translate(40px, 20px) scale(1.02); }
}

/* ── Glassmorphism Card Base ────────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-xl);
  box-shadow:
    0 8px 32px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.15);
  transition: all .3s ease;
}

.glass-card:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(0,184,217,.35);
  box-shadow:
    0 16px 48px rgba(0,0,0,.4),
    0 0 0 1px rgba(0,184,217,.15),
    inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateY(-3px);
}

/* Cyan glass variant */
.glass-card--cyan {
  background: rgba(0,184,217,.07);
  border-color: rgba(0,184,217,.22);
}
.glass-card--cyan:hover {
  background: rgba(0,184,217,.12);
  border-color: rgba(0,184,217,.4);
}

/* ── Liquid Glass Button ────────────────────────────────────── */
.btn-glass {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.22);
  color: #F8FAFC;
  font-weight: 700;
  box-shadow:
    0 4px 16px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition: all .25s ease;
}
.btn-glass:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(0,184,217,.5);
  box-shadow:
    0 8px 28px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,184,217,.2),
    inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-2px);
  color: #fff;
}

/* ── Glass Pill Badge ───────────────────────────────────────── */
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(220,238,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

/* ================================================================
   HERO — Glas-Ästhetik
   ================================================================ */
.hero-command {
  min-height: 96vh;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(0,184,217,.12), transparent 55%),
    radial-gradient(ellipse 60% 70% at 80% 70%, rgba(0,200,83,.07), transparent 55%),
    var(--navy-900);
}

/* Animated grid overlay */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,184,217,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,184,217,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
}

/* ================================================================
   PHONE MOCKUP — REPARIERT + GLASS
   ================================================================ */

/* Die gesamte mobile-split-section bekommt dunklen Hintergrund für Glaseffekte */
.mobile-split-section {
  background:
    radial-gradient(ellipse 70% 80% at 15% 50%, rgba(0,184,217,.08), transparent 55%),
    radial-gradient(ellipse 50% 60% at 85% 30%, rgba(0,200,83,.05), transparent 55%),
    var(--navy-900) !important;
  position: relative;
  overflow: hidden;
}

.mobile-split-section .container {
  position: relative;
  z-index: 1;
}

/* Override text colors for dark section */
.mobile-split-section .section-label { color: var(--cyan); }
.mobile-split-section h2 { color: #F8FAFC; }
.mobile-split-section p.lead { color: rgba(200,220,240,.75); }
.mobile-split-section .mobile-feat-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.mobile-split-section .mobile-feat-item strong { color: #F8FAFC; }
.mobile-split-section .mobile-feat-item span { color: rgba(200,220,240,.6); }
.mobile-split-section .mobile-feat-item:hover {
  background: rgba(0,184,217,.08);
  border-color: rgba(0,184,217,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* Phone outer shell — echtes Smartphone-Aussehen */
.phone-outer-frame {
  background: linear-gradient(145deg, #1a1e2a, #0e1018) !important;
  border: 2px solid rgba(255,255,255,.12) !important;
  border-radius: 44px !important;
  padding: 12px !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.4) !important;
  position: relative;
  max-width: 280px !important;
}

/* Notch / Dynamic Island */
.phone-outer-frame::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 30px;
  background: #080c12;
  border-radius: 999px;
  z-index: 10;
  border: 1px solid rgba(255,255,255,.06);
}

/* Side button simulation */
.phone-outer-frame::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 80px;
  width: 3px;
  height: 50px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.06));
  border-radius: 2px 0 0 2px;
}

.phone-outer-frame img {
  width: 100% !important;
  border-radius: 34px !important;
  display: block !important;
  aspect-ratio: 9/19.5 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Glasmorphism floating cards around the phone */
.phone-float-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.phone-glass-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(11,18,32,.85);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(0,184,217,.3);
  border-radius: 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(220,238,255,.9);
  box-shadow:
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.1);
  white-space: nowrap;
  z-index: 20;
  animation: float-badge 5s ease-in-out infinite;
}

@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.phone-glass-badge:nth-of-type(1) {
  top: 14%;
  right: -30px;
  animation-duration: 5s;
}
.phone-glass-badge:nth-of-type(2) {
  bottom: 22%;
  left: -28px;
  animation-duration: 6.5s;
  animation-delay: -2s;
}
.phone-glass-badge:nth-of-type(3) {
  bottom: 5%;
  right: -24px;
  animation-duration: 4.5s;
  animation-delay: -1s;
}

.pgb-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pgb-dot.red   { background: var(--red);   box-shadow: 0 0 0 3px rgba(255,23,68,.2); }
.pgb-dot.green { background: var(--green); box-shadow: 0 0 0 3px rgba(0,200,83,.2);  animation: pulse-dot 2s infinite; }
.pgb-dot.amber { background: var(--amber); box-shadow: 0 0 0 3px rgba(255,179,0,.2); }

/* ================================================================
   FEATURE CARDS — Glass-Darstellung für dunkle Sections
   ================================================================ */
.section--dark .feat-card,
.glass-feat-card {
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.09) !important;
  color: #F8FAFC;
}

.section--dark .feat-card:hover,
.glass-feat-card:hover {
  background: rgba(0,184,217,.08) !important;
  border-color: rgba(0,184,217,.28) !important;
  box-shadow:
    0 20px 48px rgba(0,0,0,.4),
    0 0 0 1px rgba(0,184,217,.12),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* ================================================================
   GLASS KPI CARDS — Dark variant
   ================================================================ */
.kpi-section {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0,184,217,.08), transparent 55%),
    var(--navy-800) !important;
  border-top: 1px solid rgba(0,184,217,.1) !important;
  border-bottom: 1px solid rgba(0,184,217,.1) !important;
  position: relative;
  overflow: hidden;
}

.kpi-card {
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 4px 16px rgba(0,0,0,.2);
  transition: all .25s ease !important;
}
.kpi-card:hover {
  background: rgba(0,184,217,.08) !important;
  border-color: rgba(0,184,217,.3) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.3),
    0 0 0 1px rgba(0,184,217,.1),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
  transform: translateY(-2px);
}

/* ================================================================
   GLASS MODULE CARDS
   ================================================================ */
.module-card {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 2px 12px rgba(0,0,0,.2) !important;
}

.module-card:hover {
  box-shadow:
    0 12px 32px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,184,217,.1),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* ================================================================
   GLASS COMPLIANCE CARDS
   ================================================================ */
.compliance-card {
  transition: all .28s cubic-bezier(.4,0,.2,1) !important;
}
.compliance-card:hover {
  box-shadow:
    0 20px 48px rgba(11,18,32,.15),
    0 0 0 2px rgba(0,184,217,.15) !important;
  transform: translateY(-4px) !important;
}

/* ================================================================
   GLASS DASHBOARD
   ================================================================ */
.dashboard-shell {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ================================================================
   GLASS HERO SCREENSHOT FRAME
   ================================================================ */
.hero-screenshot-frame {
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,184,217,.08),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* ================================================================
   GLASS FAQ ITEMS
   ================================================================ */
.faq-item {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .2s ease !important;
}

/* ================================================================
   GLASS FOOTER BRAND CERTS
   ================================================================ */
.footer-cert {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

/* ================================================================
   GLASS SCROLL INDICATOR (Liquid Line)
   ================================================================ */
.glass-scroll-line {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--green), var(--cyan));
  background-size: 200% 100%;
  z-index: 9999;
  transition: width .1s linear;
  animation: shimmer-line 3s linear infinite;
  box-shadow: 0 0 8px rgba(0,184,217,.6);
}
@keyframes shimmer-line {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ================================================================
   ENTRANCE ANIMATIONS
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1),
              transform .65s cubic-bezier(.4,0,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* ================================================================
   HERO TRUST BADGES — Glass-Darstellung
   ================================================================ */
.hero-trust-badge {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: all .2s ease;
}
.hero-trust-badge:hover {
  background: rgba(0,184,217,.12) !important;
  border-color: rgba(0,184,217,.3) !important;
  color: var(--cyan) !important;
}

/* ================================================================
   HERO LAGECOCKPIT — Glass Shimmer on KPI
   ================================================================ */
.hd-kpi {
  position: relative;
  overflow: hidden;
}
.hd-kpi::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: shimmer-card 4s ease-in-out infinite;
}
@keyframes shimmer-card {
  0%   { left: -100%; }
  50%, 100% { left: 150%; }
}

/* ================================================================
   CTA — Glass-Darstellung
   ================================================================ */
.cta-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300B8D9' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* Glas-Karte im CTA */
.cta-glass-card {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl);
  padding: 56px 64px;
  box-shadow:
    0 32px 80px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.12);
  position: relative;
  z-index: 1;
}

/* ================================================================
   SECTION — Flüssige Trenner
   ================================================================ */
.wave-divider {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 56px;
}


/* ================================================================
   DEVICE SLIDESHOW · Laptop + Tablet
   ================================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-device-showcase {
  min-width: 0;
}

.device-laptop {
  position: relative;
  width: min(720px, 100%);
  margin: 0 auto;
  isolation: isolate;
}

.device-laptop__lid {
  position: relative;
  padding: 14px;
  border-radius: 28px 28px 18px 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    #101827;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 34px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.device-laptop__camera {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(0,184,217,.45);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
  z-index: 5;
}

.device-laptop__screen {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #07111f;
  border: 1px solid rgba(0,184,217,.18);
}

.device-slideshow {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  background: #07111f;
}

.device-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  animation: fnx-device-slide 18s infinite;
}

.device-slide--one {
  animation-delay: 0s;
}

.device-slide--two {
  object-fit: cover;
  object-position: center 22%;
  animation-delay: 6s;
}

.device-slide--three {
  object-position: center 72%;
  animation-delay: 12s;
}

@keyframes fnx-device-slide {
  0%   { opacity: 0; transform: scale(1.04); }
  7%   { opacity: 1; transform: scale(1.01); }
  30%  { opacity: 1; transform: scale(1); }
  38%  { opacity: 0; transform: scale(1.015); }
  100% { opacity: 0; transform: scale(1.04); }
}

.device-laptop__base {
  position: relative;
  height: 28px;
  margin: 0 auto;
  width: 86%;
  border-radius: 0 0 30px 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    #0b1220;
  border: 1px solid rgba(255,255,255,.12);
  border-top: 0;
  box-shadow: 0 18px 48px rgba(0,0,0,.42);
}

.device-laptop__base span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 0 0 14px 14px;
  background: rgba(255,255,255,.12);
}

.device-tablet {
  position: absolute;
  right: -42px;
  bottom: -36px;
  width: min(170px, 25vw);
  padding: 10px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.05)),
    #101827;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 22px 60px rgba(0,0,0,.5);
  z-index: 8;
}

.device-tablet__screen {
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 3 / 4;
  background: #07111f;
  border: 1px solid rgba(0,184,217,.16);
}

.device-tablet__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 1100px) {
  .device-laptop {
    width: min(680px, 100%);
  }

  .device-tablet {
    right: -10px;
    bottom: -28px;
  }
}

@media (max-width: 760px) {
  .device-laptop__lid {
    padding: 9px;
    border-radius: 20px 20px 14px 14px;
  }

  .device-laptop__screen {
    border-radius: 13px;
  }

  .device-slideshow {
    aspect-ratio: 4 / 3;
  }

  .device-laptop__base {
    height: 20px;
  }

  .device-tablet {
    display: none;
  }

  .hs-badge--tl,
  .hs-badge--br {
    position: static;
    margin-top: 10px;
    max-width: 100%;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device-slide {
    animation: none;
    opacity: 0;
    transform: none;
  }

  .device-slide--one {
    opacity: 1;
  }
}

/* ================================================================
   MOBILE OVERFLOW FIX · iPhone darf nicht horizontal schwimmen
   Stand: 2026-06-13
   ================================================================ */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-width: 0;
}

main,
section,
.site-header,
.container,
.hero-command__inner,
.module-grid,
.feature-grid,
.compliance-grid,
.transparency-grid,
.ref-grid,
.kpi-grid,
.footer-grid {
  min-width: 0;
  max-width: 100%;
}

.container {
  width: min(1240px, 100%);
}


.module-card,
.module-card > div,
.feat-card,
.compliance-card,
.transparency-card,
.ref-card,
.kpi-card {
  min-width: 0;
  max-width: 100%;
}

.module-name,
.module-desc,
.feat-card h3,
.feat-card p,
.compliance-card h3,
.compliance-card p {
  overflow-wrap: anywhere;
  word-break: normal;
}

.hero-device-showcase,
.device-laptop,
.device-laptop__lid,
.device-laptop__base,
.device-slideshow {
  max-width: 100%;
  min-width: 0;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* Desktop bleibt kontrolliert mehrspaltig; mobile Umbrüche greifen erst in Breakpoints. */
@media (max-width: 1180px) {
  .module-grid,
  .feature-grid,
  .ref-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compliance-grid,
  .transparency-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .site-header {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .brand {
    min-width: 0;
  }

  .brand-text {
    min-width: 0;
  }

  .brand strong,
  .brand small {
    white-space: normal;
  }

  .nav-toggle {
    flex-shrink: 0;
  }

  .section,
  .section--dark,
  .section--navy,
  .section--alt,
  .section--white,
  .kpi-section,
  .cta-section,
  #module,
  #kritis {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .container {
    width: 100%;
    max-width: 100%;
  }

  .section-head,
  .section-head.dark-section {
    max-width: 100%;
  }

  .section-head h2,
  .section-head.dark-section h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .module-grid,
  .feature-grid,
  .compliance-grid,
  .transparency-grid,
  .ref-grid,
  .kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .module-card {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: flex-start;
    padding: 18px;
  }

  .module-icon {
    width: 38px;
    min-width: 38px;
  }

  .module-name {
    font-size: 17px;
    line-height: 1.25;
  }

  .module-desc {
    font-size: 14px;
    line-height: 1.45;
  }

  .module-badge {
    margin-top: 10px;
  }

  .hero-command__inner {
    width: 100%;
    max-width: 100%;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero-screenshot-wrap,
  .hero-device-showcase {
    width: 100%;
    overflow: hidden;
  }

  .device-laptop {
    width: 100%;
  }

  .device-laptop__base {
    width: 82%;
  }

  .glass-orb-layer,
  .glass-orb,
  .hero-grid-overlay {
    max-width: 100%;
    overflow: hidden;
  }
}

@media (max-width: 420px) {
  .section,
  .section--dark,
  .section--navy,
  .section--alt,
  .section--white,
  .kpi-section,
  .cta-section,
  #module,
  #kritis {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .module-card {
    padding: 16px;
    gap: 12px;
  }

  .module-name {
    font-size: 16px;
  }

  .module-desc {
    font-size: 13px;
  }
}

/* ================================================================
   KEL PROCESS / VERTICAL TIMELINE SECTION
   ================================================================ */
.kel-usecase.kel-process {
  max-width: 1240px;
  margin: 36px auto 0;
  background:
    radial-gradient(circle at 12% 12%, rgba(0, 184, 217, .18), transparent 36%),
    linear-gradient(135deg, rgba(8, 24, 42, .98), rgba(10, 44, 67, .96));
  border: 1px solid rgba(0,184,217,.20);
  border-radius: var(--r-xl);
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow-md);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(420px, 1.14fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  position: relative;
  overflow: hidden;
}

.kel-usecase.kel-process::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -120px;
  bottom: -160px;
  background: radial-gradient(circle, rgba(58, 126, 255, .20), transparent 68%);
  pointer-events: none;
}

.kel-process__intro {
  position: relative;
  z-index: 1;
}

.kel-process__intro h3 {
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.12;
  margin: 10px 0 14px;
  color: #fff;
  letter-spacing: -.03em;
}

.kel-process__intro p {
  color: rgba(220,235,248,.78);
  line-height: 1.75;
  font-size: 15.5px;
  margin: 0;
  max-width: 560px;
}

.kel-process__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.kel-process__badges span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(232,242,255,.84);
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: .01em;
}

.kel-process__timeline {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kel-process__timeline::before {
  content: "";
  position: absolute;
  top: 38px;
  bottom: 38px;
  left: 27px;
  width: 2px;
  background: linear-gradient(180deg, rgba(177, 203, 226, .36), rgba(0, 184, 217, .34), rgba(177, 203, 226, .24));
  border-radius: 999px;
}

.kel-process__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  position: relative;
}

.kel-process__marker {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #103a72, #071f43);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 12px rgba(255,255,255,.08), 0 18px 36px rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.18);
  position: relative;
  z-index: 2;
}

.kel-process__card {
  min-width: 0;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 20px 22px;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.kel-process__item:hover .kel-process__card {
  transform: translateY(-3px);
  background: rgba(255,255,255,.095);
  border-color: rgba(0,184,217,.32);
  box-shadow: 0 24px 54px rgba(0,0,0,.25);
}

.kel-process__eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: rgba(139, 216, 255, .92);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kel-process__card h4 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.kel-process__card p {
  margin: 0;
  color: rgba(220,235,248,.74);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 1040px) {
  .kel-usecase.kel-process {
    grid-template-columns: 1fr;
  }

  .kel-process__intro p {
    max-width: 860px;
  }
}

@media (max-width: 640px) {
  .kel-usecase.kel-process {
    padding: 24px 18px;
    border-radius: 26px;
    gap: 26px;
  }

  .kel-process__timeline {
    gap: 18px;
  }

  .kel-process__timeline::before {
    left: 22px;
  }

  .kel-process__item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
  }

  .kel-process__marker {
    width: 44px;
    height: 44px;
    font-size: 19px;
    box-shadow: 0 0 0 8px rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.22);
  }

  .kel-process__card {
    padding: 17px 16px;
    border-radius: 20px;
  }

  .kel-process__badges span {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================
   Krankenhausalarm.de · Kundenportal
   Autor: Krankenhausalarm.de
   ================================================================ */
.portal-page {
  background:
    radial-gradient(circle at 20% 0%, rgba(0,184,217,.12), transparent 34%),
    linear-gradient(180deg, var(--navy-900), #10213a 42%, var(--bg) 42%);
}

.portal-hero {
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  padding: 110px 40px 82px;
  background:
    linear-gradient(rgba(0,184,217,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,184,217,.045) 1px, transparent 1px),
    radial-gradient(circle at 75% 20%, rgba(0,184,217,.16), transparent 36%),
    var(--navy-900);
  background-size: 48px 48px, 48px 48px, auto, auto;
  color: #fff;
}

.portal-hero__grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 46px;
  align-items: center;
}

.portal-hero h1 {
  color: #fff;
  max-width: 760px;
}

.portal-hero .lead {
  margin-top: 20px;
  max-width: 740px;
  color: rgba(220,235,248,.78);
}

.portal-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.portal-command-card {
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  border: 1px solid rgba(0,184,217,.2);
  border-radius: 30px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.portal-command-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(220,235,248,.78);
  font-size: 12px;
}

.portal-live {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.portal-radar {
  position: relative;
  width: min(100%, 330px);
  aspect-ratio: 1;
  margin: 24px auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,184,217,.18), rgba(0,184,217,.055) 48%, transparent 65%);
}

.portal-radar span {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 1px solid rgba(0,184,217,.24);
}

.portal-radar span:nth-child(2) { inset: 30%; border-color: rgba(0,200,83,.22); }
.portal-radar span:nth-child(3) { inset: 44%; border-color: rgba(255,179,0,.22); }

.portal-radar strong {
  position: relative;
  z-index: 1;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -.08em;
  color: #fff;
}

.portal-command-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.portal-command-grid div {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px;
}

.portal-command-grid strong {
  display: block;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

.portal-command-grid span {
  display: block;
  margin-top: 7px;
  color: rgba(220,235,248,.62);
  font-size: 12px;
}

.portal-dashboard-section {
  padding: 0 40px 86px;
  margin-top: -42px;
  position: relative;
  z-index: 2;
}

.portal-shell {
  max-width: 1240px;
  margin: 0 auto;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(205,221,233,.9);
  border-radius: 30px;
  box-shadow: var(--shadow-xl);
  padding: 26px;
}

.portal-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 8px 4px 22px;
}

.portal-topbar h2 {
  margin-top: -8px;
}

.portal-topbar p {
  color: var(--muted);
  max-width: 780px;
  margin-top: 8px;
}

.portal-inline-form {
  flex-shrink: 0;
}

.portal-alert {
  margin: 0 0 14px;
  padding: 13px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
}

.portal-alert.ok {
  background: rgba(0,200,83,.1);
  border: 1px solid rgba(0,200,83,.22);
  color: #0f6d3b;
}

.portal-alert.err {
  background: rgba(255,23,68,.08);
  border: 1px solid rgba(255,23,68,.2);
  color: #b01828;
}

.portal-auth-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  background: linear-gradient(135deg, #f8fbff, #eef6fb);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: 22px;
  margin-bottom: 22px;
}

.portal-auth-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(0,184,217,.11);
  border: 1px solid rgba(0,184,217,.18);
}

.portal-auth-card h3 {
  margin-bottom: 6px;
}

.portal-auth-card p {
  color: var(--muted);
}

.portal-auth-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.portal-auth-form--inline {
  grid-template-columns: minmax(220px, 360px) auto;
}

.portal-auth-form label,
.portal-upload-form label,
.portal-distribute-form label {
  display: grid;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
}

.portal-auth-form input,
.portal-distribute-form select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  background: #fff;
  color: var(--ink);
  font: 600 14px/1.2 inherit;
}

.portal-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 20px;
}

.portal-kpi {
  min-width: 0;
  background: linear-gradient(180deg, #fff, #f6fbff);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 18px;
}

.portal-kpi span,
.portal-kpi small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.portal-kpi span {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.portal-kpi strong {
  display: block;
  margin: 8px 0 5px;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

.portal-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.portal-panel {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.portal-panel--wide {
  margin-bottom: 16px;
}

.portal-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.portal-panel__head p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.portal-upload-form,
.portal-distribute-form {
  display: grid;
  gap: 12px;
}

.portal-filedrop {
  min-height: 112px;
  border: 1px dashed rgba(0,184,217,.42);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0,184,217,.06), rgba(0,200,83,.045));
  padding: 22px;
  place-items: center;
  text-align: center;
}

.portal-filedrop input {
  width: 100%;
  max-width: 360px;
  margin-top: 10px;
}

.portal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.portal-badge.ok { background: rgba(0,200,83,.1); color: #0f6d3b; border: 1px solid rgba(0,200,83,.2); }
.portal-badge.warn { background: rgba(255,179,0,.13); color: #8a5a00; border: 1px solid rgba(255,179,0,.26); }
.portal-badge.crit { background: rgba(255,23,68,.08); color: #b01828; border: 1px solid rgba(255,23,68,.2); }
.portal-badge.idle { background: rgba(132,152,174,.12); color: #53657a; border: 1px solid rgba(132,152,174,.22); }

.portal-instance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.portal-instance-card {
  background: linear-gradient(180deg, #fff, #f8fbff);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 16px;
}

.portal-instance-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.portal-instance-card__head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.portal-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(132,152,174,.12);
  background: var(--status-idle);
}

.portal-led.ok { background: var(--green); box-shadow: 0 0 0 4px rgba(0,200,83,.13); }
.portal-led.warn { background: var(--amber); box-shadow: 0 0 0 4px rgba(255,179,0,.16); }
.portal-led.crit { background: var(--red); box-shadow: 0 0 0 4px rgba(255,23,68,.13); }
.portal-led.idle { background: var(--status-idle); }

.portal-instance-card dl {
  display: grid;
  gap: 9px;
}

.portal-instance-card dl div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
}

.portal-instance-card dt {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.portal-instance-card dd {
  min-width: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.portal-list {
  display: grid;
  gap: 10px;
}

.portal-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: #f8fbff;
  border: 1px solid var(--line-soft);
}

.portal-list-row strong,
.portal-list-row span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-list-row strong {
  font-size: 14px;
  color: var(--ink);
}

.portal-list-row span:not(.portal-badge) {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.portal-empty {
  padding: 18px;
  border-radius: 16px;
  background: #f8fbff;
  color: var(--muted);
  border: 1px dashed var(--line);
}

.portal-security-section {
  padding: 86px 40px 110px;
  background: var(--bg);
}

.portal-security-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.portal-security-grid div {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.portal-security-grid strong,
.portal-security-grid span {
  display: block;
}

.portal-security-grid strong {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 9px;
}

.portal-security-grid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 1100px) {
  .portal-hero__grid,
  .portal-workspace {
    grid-template-columns: 1fr;
  }

  .portal-kpi-grid,
  .portal-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-instance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .portal-hero,
  .portal-dashboard-section,
  .portal-security-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .portal-hero {
    padding-top: 78px;
  }

  .portal-shell {
    padding: 18px;
    border-radius: 24px;
  }

  .portal-topbar,
  .portal-panel__head,
  .portal-list-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  .portal-kpi-grid,
  .portal-instance-grid,
  .portal-security-grid,
  .portal-auth-form,
  .portal-auth-form--inline {
    grid-template-columns: 1fr;
  }

  .portal-auth-card {
    grid-template-columns: 1fr;
  }

  .portal-command-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────
   Krankenhausalarm.de Website · Kundenportal-Teaser
   Autor: Krankenhausalarm.de
   Zweck: Integration des zentralen Kundenportals in die öffentliche Website.
   ───────────────────────────────────────────────────────────── */
.customer-portal-teaser {
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 102, 255, .08), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
}

.portal-teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 20px;
  align-items: stretch;
}

.portal-teaser-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 28px;
  padding: 28px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.portal-teaser-card--dark {
  color: #fff;
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(135deg, rgba(0,102,255,.18), transparent 45%),
    linear-gradient(180deg, #101d33 0%, #08111f 100%);
}

.portal-teaser-card--dark::after {
  content: "";
  position: absolute;
  inset: auto -90px -100px auto;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: rgba(0,200,255,.16);
  filter: blur(10px);
}

.portal-teaser-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.portal-teaser-card h3 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: -.04em;
  line-height: 1.05;
}

.portal-teaser-card p {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.76);
  max-width: 720px;
  line-height: 1.75;
}

.portal-teaser-card:not(.portal-teaser-card--dark) p,
.portal-feature-list span {
  color: var(--muted);
}

.portal-flow {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 24px 0;
}

.portal-flow span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.portal-flow i {
  width: 26px;
  height: 1px;
  background: rgba(255,255,255,.34);
}

.portal-mini-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  background: #f7fbff;
  border: 1px solid var(--line-soft);
  margin-bottom: 18px;
}

.portal-mini-status strong {
  color: var(--ink);
  font-size: 14px;
}

.portal-mini-status em {
  font-style: normal;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.portal-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.portal-feature-list li {
  display: grid;
  gap: 5px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.portal-feature-list li:last-child {
  border-bottom: 0;
}

.portal-feature-list strong {
  color: var(--ink);
  font-size: 14px;
}

.portal-feature-list span {
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .portal-teaser-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .customer-portal-teaser {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .portal-teaser-card {
    padding: 22px;
    border-radius: 22px;
  }

  .portal-flow {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-flow i {
    width: 1px;
    height: 18px;
    margin-left: 18px;
  }
}

/* Krankenhausalarm.de Kundenportal · Kundenseite/Admintrennung · 2026-06-14 */
.customer-login-page .customer-login-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 24px;
  align-items: stretch;
}

.customer-login-card,
.customer-security-card {
  min-height: 100%;
}

.customer-login-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

.customer-auth-form label {
  display: grid;
  gap: 7px;
  font-size: .88rem;
  font-weight: 800;
  color: var(--text, #172033);
}

.customer-auth-form input {
  width: 100%;
}

.customer-access-orbit {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 22px auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(255,255,255,.22), rgba(255,255,255,.06) 42%, rgba(14,165,233,.10) 65%, rgba(15,23,42,.34));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 36px rgba(14,165,233,.18), 0 24px 50px rgba(2,8,23,.24);
}

.customer-access-orbit span {
  position: absolute;
  inset: 18px;
  border-radius: 999px;
  border: 1px solid rgba(125,211,252,.24);
}

.customer-access-orbit span:nth-child(2) {
  inset: 42px;
  border-color: rgba(34,197,94,.24);
}

.customer-access-orbit span:nth-child(3) {
  inset: 66px;
  border-color: rgba(248,113,113,.24);
}

.customer-access-orbit strong {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #0f172a;
  font-size: 1rem;
  letter-spacing: .1em;
  box-shadow: 0 20px 42px rgba(2,8,23,.25);
}

.portal-public-info {
  padding: 88px 40px;
}

.portal-check-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.portal-check-list li {
  position: relative;
  padding-left: 28px;
  color: var(--muted, #526071);
  line-height: 1.55;
}

.portal-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 900;
  color: #065f46;
  background: rgba(16,185,129,.14);
}

@media (max-width: 860px) {
  .customer-login-page .customer-login-grid {
    grid-template-columns: 1fr;
  }
  .customer-access-orbit {
    width: 156px;
    height: 156px;
  }
}


/* ================================================================
   Krankenhausalarm.de Korrektur 2026-06-14: Mobile Section ohne Fake-Smartphone
   ================================================================ */
.mobile-split-section {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.mobile-split-grid {
  grid-template-columns: minmax(360px, .82fr) minmax(460px, 1fr) !important;
  gap: 56px !important;
  max-width: 1180px !important;
}
.mobile-alarm-panel {
  width: min(100%, 520px);
  margin-left: auto;
  background: linear-gradient(145deg, rgba(10, 22, 38, .96), rgba(15, 31, 50, .92));
  border: 1px solid rgba(0, 184, 217, .28);
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}
.mobile-alarm-panel__bar,
.mobile-alarm-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  font: 700 12px/1.2 ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  color: rgba(226,232,240,.78);
  background: rgba(3, 8, 18, .38);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-alarm-panel__footer {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 0;
}
.mobile-alarm-panel__footer span { display:flex; align-items:center; gap:8px; }
.mobile-alarm-panel__footer i,
.map-dot { width: 8px; height: 8px; border-radius: 999px; display:inline-block; background: var(--green); box-shadow: 0 0 0 4px rgba(0,200,83,.12); }
.map-dot.red { background: var(--red); box-shadow: 0 0 0 4px rgba(255,23,68,.14); }
.mobile-alarm-panel__body { padding: 28px; }
.map-status-row { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px; }
.map-tag { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.map-tag--danger { color:#fecdd3; background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.28); }
.map-time { font:700 12px/1.2 "JetBrains Mono",monospace; color:rgba(226,232,240,.68); }
.mobile-alarm-panel h3 { margin:0 0 10px; color:#fff; font-size:28px; line-height:1.08; letter-spacing:-.04em; }
.mobile-alarm-panel p { margin:0; color:rgba(226,232,240,.76); font-size:15px; line-height:1.55; }
.mobile-alarm-panel__meta { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0; }
.mobile-alarm-panel__meta span { min-height:64px; padding:12px; border-radius:16px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); color:rgba(226,232,240,.78); font-size:12px; }
.mobile-alarm-panel__meta strong { display:block; margin-bottom:6px; color:#fff; font-size:12px; }
.mobile-alarm-panel__actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.map-action { border:0; border-radius:16px; padding:14px 16px; font-weight:900; color:#fff; cursor:default; }
.map-action--accept { background:linear-gradient(135deg, #00b8d9, #008fb0); box-shadow:0 16px 32px rgba(0,184,217,.22); }
.map-action--decline { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); }

/* FAQ größer und besser lesbar */
.faq-grid { max-width: 1120px !important; gap: 12px !important; }
.faq-q { font-size: 17px !important; line-height: 1.45 !important; padding: 21px 24px !important; }
.faq-a { font-size: 16px !important; line-height: 1.75 !important; padding: 0 24px 22px 62px !important; }
.faq-q-icon { width: 26px !important; height: 26px !important; font-size: 14px !important; }

/* Kundenlogin als Modal */
html.modal-open, html.modal-open body { overflow: hidden; }
.customer-login-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 24px; }
.customer-login-modal.is-open { display: flex; }
.customer-login-modal__overlay { position:absolute; inset:0; background:rgba(3,7,18,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.customer-login-modal__dialog { position:relative; z-index:1; width:min(100%, 560px); background:#fff; color:var(--navy-800); border-radius:28px; padding:34px; box-shadow:0 34px 100px rgba(0,0,0,.42); border:1px solid rgba(15,23,42,.1); }
.customer-login-modal__close { position:absolute; top:16px; right:18px; width:36px; height:36px; border-radius:999px; border:1px solid var(--line-soft); background:#f8fafc; color:var(--navy-800); font-size:24px; line-height:1; cursor:pointer; }
.customer-login-modal h2 { margin:8px 0 8px; font-size:34px; line-height:1.05; letter-spacing:-.05em; }
.customer-login-modal p { color:var(--muted); line-height:1.6; }
.customer-login-modal__form { display:grid; gap:14px; margin-top:20px; }
.customer-login-modal__form label { display:grid; gap:7px; font-weight:800; font-size:13px; color:var(--navy-800); }
.customer-login-modal__form input { width:100%; min-height:48px; border-radius:14px; border:1px solid var(--line-soft); padding:0 14px; font:600 15px/1.2 inherit; background:#fff; }
.customer-login-modal__form input:focus { outline:3px solid rgba(0,184,217,.18); border-color:rgba(0,184,217,.45); }
.customer-login-modal__error { margin-top:14px; padding:12px 14px; border-radius:14px; color:#991b1b; background:#fee2e2; border:1px solid #fecaca; font-weight:800; }
.customer-login-modal__note { margin-top:16px; font-size:13px; }
@media (max-width: 900px) {
  .mobile-split-grid { grid-template-columns: 1fr !important; }
  .mobile-alarm-panel { margin: 0 auto; }
  .mobile-alarm-panel__meta { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .customer-login-modal__dialog { padding: 26px 20px; border-radius: 22px; }
  .customer-login-modal h2 { font-size: 28px; }
  .faq-q { font-size: 16px !important; }
}


/* Krankenhausalarm.de · Kundenlogin vergrößert + Portal-Admin Kundenzugänge · 2026-06-14 */
.customer-login-modal { padding: clamp(18px, 3vw, 48px) !important; }
.customer-login-modal__dialog {
  width: min(94vw, 1280px) !important;
  min-height: min(76vh, 760px);
  padding: clamp(38px, 5vw, 68px) !important;
  border-radius: 34px !important;
  box-shadow: 0 42px 130px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.08) inset !important;
}
.customer-login-modal h2 { font-size: clamp(46px, 5.2vw, 78px) !important; letter-spacing: -.07em; margin-bottom: 16px !important; }
.customer-login-modal p { font-size: clamp(18px, 1.35vw, 24px) !important; max-width: 920px; }
.customer-login-modal__grid { display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 32px; margin-top: 34px; align-items: stretch; }
.customer-login-modal__form { grid-template-columns: 1fr 1fr auto; align-items: end; gap: 18px !important; margin-top: 0 !important; padding: 30px; border: 1px solid rgba(15,23,42,.1); border-radius: 28px; background: linear-gradient(180deg, #fff, #f8fbff); box-shadow: 0 18px 48px rgba(15,23,42,.08); }
.customer-login-modal__form label { font-size: 16px !important; gap: 10px !important; }
.customer-login-modal__form input { min-height: 64px !important; border-radius: 18px !important; padding: 0 20px !important; font-size: 18px !important; }
.customer-login-modal__form .btn { min-height: 64px; padding-inline: 32px; font-size: 16px; }
.customer-login-modal__hints { border: 1px solid rgba(15,23,42,.1); border-radius: 28px; padding: 32px; background: #fff; box-shadow: 0 18px 48px rgba(15,23,42,.08); }
.customer-login-modal__hints strong { display:block; font-size: 24px; letter-spacing: -.04em; color: var(--navy-800); margin-bottom: 20px; }
.customer-login-modal__hints ul { display:grid; gap: 16px; margin:0; padding:0; list-style:none; color: var(--muted); font-size: 18px; line-height: 1.5; }
.customer-login-modal__hints li { position:relative; padding-left: 34px; }
.customer-login-modal__hints li::before { content:'✓'; position:absolute; left:0; top:0; width:24px; height:24px; border-radius:999px; display:grid; place-items:center; background:rgba(0,200,83,.1); color:#087a46; font-weight:900; }
.customer-login-modal__note { font-size: 15px !important; margin-top: 26px !important; }
.customer-login-modal__close { width: 46px !important; height: 46px !important; font-size: 30px !important; top: 24px !important; right: 26px !important; }
.customer-login-modal__error { font-size: 18px; padding: 18px 22px !important; border-radius: 18px !important; margin-top: 24px !important; }
.portal-customer-admin { margin-bottom: 28px; }
.portal-customer-form { display:grid; grid-template-columns: 1.1fr .9fr 1.35fr 1fr auto auto; gap: 14px; align-items:end; margin-top: 18px; }
.portal-customer-form label { display:grid; gap: 8px; font-size: 12px; font-weight:900; color: var(--navy-700); }
.portal-customer-form input { min-height: 46px; border:1px solid var(--line-soft); border-radius: 14px; padding: 0 14px; font: 700 14px/1.2 inherit; background:#fff; }
.portal-check-toggle { display:flex !important; align-items:center; gap:10px !important; min-height:46px; padding:0 12px; border:1px solid var(--line-soft); border-radius:14px; background:#fff; }
.portal-check-toggle input { min-height: auto; width: 18px; height: 18px; }
.portal-customer-table { margin-top: 22px; border:1px solid rgba(15,23,42,.08); border-radius: 20px; overflow:hidden; background:#fff; }
.portal-customer-row { display:grid; grid-template-columns: 1.1fr .85fr 1.6fr .55fr .55fr; gap: 16px; align-items:center; padding: 16px 18px; border-top:1px solid rgba(15,23,42,.07); font-size: 14px; }
.portal-customer-row:first-child { border-top:0; }
.portal-customer-row--head { background:#f8fafc; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.portal-customer-row strong { display:block; color: var(--navy-800); }
.portal-customer-row small { display:block; color: var(--muted); margin-top: 3px; }
.portal-icon-action { min-height: 34px; border-radius:999px; border:1px solid rgba(255,23,68,.28); background:#fff; color:#b01828; font-weight:900; padding:0 12px; cursor:pointer; }
.portal-icon-action:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width: 1100px) {
  .customer-login-modal__grid { grid-template-columns: 1fr; }
  .customer-login-modal__form { grid-template-columns: 1fr; }
  .portal-customer-form, .portal-customer-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .customer-login-modal__dialog { min-height: auto; padding: 28px 20px !important; border-radius: 24px !important; }
  .customer-login-modal h2 { font-size: 38px !important; }
  .customer-login-modal p, .customer-login-modal__hints ul { font-size: 16px !important; }
  .customer-login-modal__form, .customer-login-modal__hints { padding: 20px; border-radius: 20px; }
}


/* ================================================================
   FINAL STARTSEITEN-FIX · Header/Hero/Badges
   Stand: 2026-06-14
   ================================================================ */
body.homepage .site-header,
.site-header {
  min-height: 64px;
  padding-inline: clamp(20px, 2.4vw, 34px);
}

body.homepage .hero-command,
.hero-command {
  min-height: clamp(650px, 78vh, 790px) !important;
  align-items: start !important;
}

body.homepage .hero-command__inner,
.hero-command__inner {
  max-width: 1320px;
  padding: clamp(82px, 9vh, 118px) clamp(24px, 3vw, 40px) clamp(58px, 7vh, 86px) !important;
  gap: clamp(44px, 6vw, 86px) !important;
  align-items: start !important;
}

body.homepage .hero-copy,
.hero-copy {
  padding-top: clamp(22px, 3.2vh, 42px);
}

body.homepage .hero-screenshot-wrap,
.hero-screenshot-wrap.hero-device-showcase {
  padding-top: clamp(8px, 2vh, 24px);
}

body.homepage .device-tablet,
.device-tablet {
  display: none !important;
}

body.homepage .device-slide--two,
.device-slide--two {
  object-position: center center !important;
}

body.homepage .hs-badge,
.hs-badge {
  background: rgba(55, 65, 81, .94) !important;
  border: 1px solid rgba(156, 163, 175, .62) !important;
  color: #F8FAFC !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}

body.homepage .hs-badge--tl,
.hs-badge--tl {
  top: 42px !important;
  left: -12px !important;
}

body.homepage .hs-badge--br,
.hs-badge--br {
  right: -10px !important;
  bottom: 22px !important;
}

body.homepage .faq-question,
.faq-question,
.faq-item summary {
  font-size: clamp(17px, 1.05vw, 19px) !important;
  line-height: 1.45 !important;
}

body.homepage .faq-answer,
.faq-answer,
.faq-item p {
  font-size: clamp(15px, .95vw, 17px) !important;
  line-height: 1.7 !important;
}

@media (max-width: 1100px) {
  body.homepage .hero-command,
  .hero-command {
    min-height: auto !important;
  }

  body.homepage .hero-command__inner,
  .hero-command__inner {
    grid-template-columns: 1fr !important;
    padding-top: 64px !important;
  }
}

/* ================================================================
   Krankenhausalarm.de · Automatische Kontaktdatenpflege als PC-Ansicht
   Stand: 2026-06-14
   ================================================================ */
.contact-care-section {
  position: relative;
  overflow: hidden;
  padding: clamp(82px, 9vw, 128px) 40px;
  background:
    radial-gradient(circle at 82% 20%, rgba(0, 200, 255, .16), transparent 34%),
    linear-gradient(180deg, #0B1220 0%, #0E1B2F 48%, #0B1220 100%);
  color: #f8fafc;
}
.contact-care-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.2));
  pointer-events: none;
}
.contact-care-bg {
  position: absolute;
  width: 520px;
  height: 520px;
  right: -140px;
  top: -120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0, 196, 255, .20), transparent 68%);
  filter: blur(4px);
}
.contact-care-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(460px, .78fr) minmax(720px, 1.22fr);
  gap: clamp(52px, 6vw, 96px);
  align-items: center;
}
.contact-care-copy h2 {
  max-width: 720px;
  margin: 14px 0 18px;
  color: #fff;
  font-size: clamp(38px, 4.2vw, 68px);
  line-height: .96;
  letter-spacing: -.065em;
}
.contact-care-copy .lead {
  max-width: 700px;
  color: rgba(226, 232, 240, .84);
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.58;
}
.contact-care-copy p:not(.lead) {
  max-width: 680px;
  color: rgba(203, 213, 225, .78);
  font-size: 16px;
  line-height: 1.7;
}
.contact-care-points {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}
.contact-care-point {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px 18px;
  align-items: start;
  padding: 20px 22px;
  min-height: 112px;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 18px;
  background: rgba(15, 23, 42, .58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.contact-care-point span {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #67e8f9;
  background: rgba(8, 145, 178, .18);
  border: 1px solid rgba(103, 232, 249, .20);
  font-size: 12px;
  font-weight: 900;
}
.contact-care-point strong {
  display: block;
  grid-column: 2;
  color: #f8fafc;
  font-size: 17px;
  margin-bottom: 0;
}
.contact-care-point small {
  display: block;
  grid-column: 2;
  color: rgba(203, 213, 225, .78);
  font-size: 15px;
  line-height: 1.55;
  margin-top: -8px;
}
.contact-care-visual { position: relative; }
.pc-view-frame {
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(30, 41, 59, .95), rgba(15, 23, 42, .98));
  border: 1px solid rgba(148, 163, 184, .28);
  box-shadow: 0 42px 120px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255,255,255,.06) inset;
  overflow: hidden;
  transform: perspective(1200px) rotateY(-1deg) rotateX(.6deg);
}
.pc-view-frame__top {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  background: rgba(2, 6, 23, .62);
}
.pc-view-frame__top span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #64748b;
}
.pc-view-frame__top span:nth-child(1) { background: #fb7185; }
.pc-view-frame__top span:nth-child(2) { background: #fbbf24; }
.pc-view-frame__top span:nth-child(3) { background: #22c55e; }
.pc-view-frame__top strong {
  margin-left: 10px;
  color: rgba(226, 232, 240, .76);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pc-view-frame__screen {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #020617;
}
.pc-view-frame__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.contact-care-visual-stack {
  display: grid;
  gap: 18px;
}
.data-age-frame {
  display: grid;
  grid-template-columns: minmax(220px, .42fr) minmax(360px, .58fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(8, 15, 28, .96));
  border: 1px solid rgba(148, 163, 184, .24);
  box-shadow: 0 28px 84px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
.data-age-frame__copy {
  min-width: 0;
}
.data-age-frame__copy .mini-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  color: #67e8f9;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.data-age-frame__copy h3 {
  margin: 0 0 9px;
  color: #f8fafc;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.data-age-frame__copy p {
  margin: 0;
  color: rgba(203, 213, 225, .76);
  font-size: 14.5px;
  line-height: 1.55;
}
.data-age-frame__image {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .20);
  background: #020617;
}
.data-age-frame__image img {
  width: 100%;
  height: auto;
  display: block;
}

.contact-care-badges {
  position: relative;
  left: auto;
  bottom: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  margin-top: 16px;
}
.contact-care-badges span {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(55, 65, 81, .94);
  border: 1px solid rgba(156, 163, 175, .62);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 14px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.12);
}
.contact-care-visual .legal-note {
  margin: 18px 0 0;
  color: rgba(203, 213, 225, .58);
}
@media (max-width: 1100px) {
  .contact-care-grid { grid-template-columns: 1fr; }
  .data-age-frame { grid-template-columns: 1fr; }
  .contact-care-point strong, .contact-care-point small { grid-column: 2; }
  .pc-view-frame { transform: none; }
}
@media (max-width: 640px) {
  .contact-care-section { padding: 64px 20px; }
  .data-age-frame { padding: 14px; border-radius: 20px; }
  .contact-care-point { grid-template-columns: 1fr; }
  
.contact-care-visual-stack {
  display: grid;
  gap: 18px;
}
.data-age-frame {
  display: grid;
  grid-template-columns: minmax(220px, .42fr) minmax(360px, .58fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(8, 15, 28, .96));
  border: 1px solid rgba(148, 163, 184, .24);
  box-shadow: 0 28px 84px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
.data-age-frame__copy {
  min-width: 0;
}
.data-age-frame__copy .mini-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  color: #67e8f9;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.data-age-frame__copy h3 {
  margin: 0 0 9px;
  color: #f8fafc;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.data-age-frame__copy p {
  margin: 0;
  color: rgba(203, 213, 225, .76);
  font-size: 14.5px;
  line-height: 1.55;
}
.data-age-frame__image {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .20);
  background: #020617;
}
.data-age-frame__image img {
  width: 100%;
  height: auto;
  display: block;
}

.contact-care-badges { position: static; margin-top: 12px; max-width: none; }
}

/* ================================================================
   Premium Hospital Hero + KEL Timeline · 2026-06-15
   Ergänzung: hochauflösendes Krankenhaus-Hintergrundbild, ruhige
   Enterprise-Anmutung, starke Lesbarkeit, keine Leistungszusagen.
   ================================================================ */

.hero-command.hero-command--hospital {
  min-height: clamp(760px, 94vh, 980px);
  isolation: isolate;
  background: #071225;
}

.hero-hospital-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #071225;
}

.hero-hospital-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.015);
}

.hero-hospital-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(7, 18, 37, .98) 0%,
      rgba(7, 18, 37, .91) 22%,
      rgba(7, 18, 37, .72) 43%,
      rgba(7, 18, 37, .30) 68%,
      rgba(7, 18, 37, .16) 100%),
    linear-gradient(180deg,
      rgba(7, 18, 37, .60) 0%,
      rgba(7, 18, 37, .08) 42%,
      rgba(7, 18, 37, .76) 100%),
    radial-gradient(circle at 18% 36%, rgba(0, 184, 217, .18), transparent 32%);
}

.hero-command.hero-command--hospital::before {
  z-index: 1;
  opacity: .42;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 84%);
}

.hero-command.hero-command--hospital::after {
  z-index: 1;
  background:
    radial-gradient(ellipse 65% 54% at 26% 44%, rgba(0,184,217,.16), transparent 66%),
    radial-gradient(ellipse 45% 46% at 86% 26%, rgba(255,255,255,.20), transparent 62%);
}

.hero-command.hero-command--hospital .glass-orb-layer,
.hero-command.hero-command--hospital .hero-grid-overlay {
  z-index: 1;
  opacity: .52;
}

.hero-command.hero-command--hospital .hero-command__inner {
  max-width: 1440px;
  min-height: inherit;
  grid-template-columns: minmax(420px, .88fr) minmax(520px, 1.12fr);
  gap: clamp(34px, 5vw, 84px);
  padding-top: clamp(92px, 10vh, 148px);
  padding-bottom: clamp(76px, 8vh, 120px);
}

.hero-command.hero-command--hospital .hero-copy {
  max-width: 680px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(8, 18, 35, .72), rgba(8, 18, 35, .52));
  border: 1px solid rgba(226, 232, 240, .14);
  box-shadow:
    0 34px 92px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

.hero-command.hero-command--hospital .hero-eyebrow {
  color: #9ee8f5;
  text-shadow: 0 1px 18px rgba(0,0,0,.42);
}

.hero-command.hero-command--hospital h1 {
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.0;
  letter-spacing: -.03em;
  text-wrap: balance;
  text-shadow: 0 22px 60px rgba(0,0,0,.46);
}

.hero-command.hero-command--hospital h1 .accent {
  color: #7dd3fc;
  background: linear-gradient(90deg, #e0f7ff 0%, #7dd3fc 42%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-command.hero-command--hospital .hero-subtitle {
  max-width: 640px;
  color: rgba(241,245,249,.86);
  font-size: clamp(17px, 1.28vw, 21px);
  text-shadow: 0 3px 24px rgba(0,0,0,.35);
}

.hero-command.hero-command--hospital .btn-primary {
  color: #051225;
  background: linear-gradient(180deg, #7dd3fc 0%, #22c4e8 100%);
  box-shadow: 0 18px 36px rgba(34, 196, 232, .30), inset 0 1px 0 rgba(255,255,255,.45);
}

.hero-command.hero-command--hospital .btn-glass {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.24);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.hero-command.hero-command--hospital .hero-trust-badge {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.19);
  color: rgba(241,245,249,.88);
}

.hero-command.hero-command--hospital .legal-note {
  color: rgba(226,232,240,.62);
}

.hero-clinic-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
  max-width: 590px;
}

.hero-clinic-proof span {
  display: grid;
  gap: 2px;
  min-height: 72px;
  align-content: center;
  padding: 14px 16px;
  border-radius: 18px;
  color: rgba(226, 232, 240, .82);
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.hero-clinic-proof strong {
  display: block;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  color: #f8fafc;
  letter-spacing: -.04em;
}

.hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
  align-self: end;
  transform: translateY(32px);
  filter: drop-shadow(0 38px 80px rgba(0,0,0,.36));
}

.hero-command.hero-command--hospital .device-laptop {
  background: rgba(8, 18, 35, .20);
  border-radius: 32px;
}

.hero-command.hero-command--hospital .device-laptop__lid {
  border-color: rgba(255,255,255,.20);
  background: linear-gradient(180deg, rgba(248,250,252,.18), rgba(15,23,42,.58));
  box-shadow:
    0 36px 110px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-command.hero-command--hospital + .wave-divider {
  margin-top: -1px;
}

.kel-usecase.kel-process {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.96)),
    radial-gradient(circle at 12% 0%, rgba(0,184,217,.16), transparent 36%);
  border: 1px solid rgba(148, 163, 184, .26);
  box-shadow:
    0 34px 96px rgba(15, 23, 42, .14),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.kel-usecase.kel-process::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.74) 34%, rgba(255,255,255,.54) 100%),
    url('../img/header-krankenhausalarm.jpg') right center / cover no-repeat;
  opacity: .18;
  filter: saturate(.92);
}

.kel-usecase.kel-process > * {
  position: relative;
  z-index: 1;
}

.kel-process__intro h3 {
  font-size: clamp(30px, 3.2vw, 52px);
  letter-spacing: -.055em;
}

.kel-process__timeline::before {
  background: linear-gradient(180deg, rgba(30,64,175,.08), rgba(14,165,233,.55), rgba(30,64,175,.08));
  width: 3px;
  border-radius: 999px;
}

.kel-process__marker {
  background: linear-gradient(180deg, #0f62bd, #073a7a);
  color: #fff;
  border: 6px solid rgba(219,234,254,.92);
  box-shadow:
    0 18px 34px rgba(15, 98, 189, .24),
    0 0 0 8px rgba(37,99,235,.08);
}

.kel-process__card {
  border-color: rgba(148, 163, 184, .24);
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 42px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.kel-process__item:hover .kel-process__card {
  transform: translateY(-4px);
  box-shadow: 0 28px 64px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.90);
}

@media (max-width: 1100px) {
  .hero-command.hero-command--hospital {
    min-height: auto;
  }
  .hero-command.hero-command--hospital .hero-command__inner {
    grid-template-columns: 1fr;
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
    transform: none;
    max-width: 860px;
    margin: 0 auto;
  }
  .hero-hospital-bg img {
    object-position: 64% 50%;
  }
  .hero-hospital-overlay {
    background:
      linear-gradient(180deg, rgba(7,18,37,.95) 0%, rgba(7,18,37,.76) 45%, rgba(7,18,37,.92) 100%),
      radial-gradient(circle at 28% 20%, rgba(0,184,217,.18), transparent 34%);
  }
}

@media (max-width: 720px) {
  .hero-command.hero-command--hospital .hero-command__inner {
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 48px;
    padding-bottom: 56px;
  }
  .hero-command.hero-command--hospital .hero-copy {
    padding: 22px;
    border-radius: 24px;
  }
  .hero-clinic-proof {
    grid-template-columns: 1fr;
  }
  .hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
    display: none;
  }
  .hero-hospital-bg img {
    object-position: 58% 50%;
  }
}


/* ==============================================================
   Krankenhausalarm.de Logo-/Hero-Integration · 2026-06-16
   Autor: Krankenhausalarm.de
   Zweck: Professionelle Einbindung der gelieferten Krankenhausalarm.de-Bildmarke
   und Wortmarke ohne externe Abhängigkeiten.
   ============================================================== */
.brand.brand--image {
  min-width: 178px;
  gap: 0;
}

.brand-logo-img {
  display: block;
  width: clamp(172px, 13vw, 235px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 184, 217, .18));
}

.brand-text--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-command.hero-command--hospital {
  background:
    radial-gradient(circle at 82% 24%, rgba(0, 184, 217, .22), transparent 34%),
    linear-gradient(135deg, #06111f 0%, #071a2d 46%, #0a2537 100%);
}

.hero-command.hero-command--hospital .hero-hospital-overlay {
  background:
    linear-gradient(90deg,
      rgba(6, 17, 31, .99) 0%,
      rgba(6, 17, 31, .94) 24%,
      rgba(6, 17, 31, .76) 48%,
      rgba(6, 17, 31, .26) 76%,
      rgba(6, 17, 31, .10) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(6,17,31,.04) 34%,
      rgba(6,17,31,.82) 100%),
    radial-gradient(circle at 20% 30%, rgba(0, 216, 230, .20), transparent 34%);
}

.hero-brand-lockup {
  width: min(360px, 72vw);
  margin: 0 0 28px;
  padding: 14px 18px;
  border-radius: 24px;
  background: rgba(2, 12, 23, .46);
  border: 1px solid rgba(125, 211, 252, .20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 28px 70px rgba(0,0,0,.28);
}

.hero-brand-lockup img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hero-shield-panel {
  position: absolute;
  z-index: 5;
  top: clamp(-56px, -4vw, -24px);
  right: clamp(-10px, 1vw, 24px);
  width: clamp(170px, 18vw, 270px);
  padding: 18px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(8,18,35,.72), rgba(8,18,35,.42));
  border: 1px solid rgba(125, 211, 252, .20);
  box-shadow:
    0 32px 90px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

.hero-shield-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0,216,230,.42), transparent 42%, rgba(255,255,255,.16));
  opacity: .55;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.hero-shield-panel img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 34px rgba(0, 184, 217, .20));
}

.hero-shield-panel__text {
  margin-top: -8px;
  display: grid;
  gap: 4px;
  text-align: center;
}

.hero-shield-panel__text strong {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
}

.hero-shield-panel__text span {
  color: rgba(226, 232, 240, .70);
  font-size: 11px;
  line-height: 1.35;
}

.hero-command.hero-command--hospital .device-laptop {
  margin-top: clamp(88px, 10vw, 142px);
}

@media (max-width: 1100px) {
  .brand-logo-img { width: 180px; }
  .hero-shield-panel {
    position: relative;
    top: auto;
    right: auto;
    width: min(250px, 58vw);
    margin: 0 auto -18px;
  }
  .hero-command.hero-command--hospital .device-laptop {
    margin-top: 34px;
  }
}

@media (max-width: 720px) {
  .brand-logo-img { width: 156px; }
  .hero-brand-lockup {
    width: min(300px, 86vw);
    margin-bottom: 20px;
    padding: 12px 14px;
  }
  .hero-shield-panel__text { display: none; }
}


/* ================================================================
   Krankenhausalarm.de · Header/Footer Logo Revision
   Stand: 2026-06-16
   Zweck: kompakterer Header, Bildmarke auch im Footer, Footer-Links erweitert.
   ================================================================ */
.site-header {
  min-height: 54px !important;
  padding-inline: clamp(14px, 1.8vw, 26px) !important;
  gap: 10px !important;
}

.brand.brand--image {
  min-width: 136px !important;
}

.brand-logo-img {
  width: clamp(136px, 10.5vw, 178px) !important;
  max-height: 48px;
  object-fit: contain;
}

.main-nav {
  gap: clamp(8px, 1.1vw, 16px) !important;
}

.main-nav a,
.nav-a11y-btn,
.header-cta,
.status-dot {
  font-size: 12px !important;
}

.header-cta {
  padding: 9px 14px !important;
}

.footer-brand-name--image {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
}

.footer-brand-logo-img {
  display: block;
  width: min(238px, 100%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0, 184, 217, .18));
}

.footer-bottom {
  align-items: center;
}

.footer-links {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
}

@media (max-width: 1080px) {
  .site-header {
    min-height: 58px !important;
  }

  .brand-logo-img {
    width: 150px !important;
    max-height: 50px;
  }
}

@media (max-width: 720px) {
  .site-header {
    min-height: 56px !important;
    padding-inline: 14px !important;
  }

  .brand-logo-img {
    width: 138px !important;
  }

  .footer-brand-logo-img {
    width: 210px;
  }

  .footer-links {
    justify-content: flex-start;
  }
}


/* ================================================================
   Krankenhausalarm.de · Hero/Header/Footer Feinkorrektur
   Stand: 2026-06-16
   Zweck: Header-Logo vergrößern, Hero-Logo aus Copy entfernen,
   Kundenbereich-Teaser von der Startseite entfernt, Begriff bereinigt.
   ================================================================ */
.site-header {
  min-height: 52px !important;
  padding-block: 4px !important;
}

.brand.brand--image {
  min-width: 176px !important;
}

.brand-logo-img {
  width: clamp(170px, 12vw, 216px) !important;
  max-height: none !important;
}

.hero-brand-lockup {
  display: none !important;
}

.hero-right-logo-gradient {
  position: absolute;
  z-index: 7;
  top: clamp(-76px, -5vw, -34px);
  right: clamp(126px, 13vw, 230px);
  width: clamp(230px, 25vw, 390px);
  padding: 18px 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 20%, rgba(0, 216, 230, .34), transparent 42%),
    linear-gradient(135deg, rgba(3, 13, 26, .88), rgba(7, 25, 43, .56));
  border: 1px solid rgba(125, 211, 252, .24);
  box-shadow:
    0 34px 90px rgba(0,0,0,.34),
    0 0 80px rgba(0, 184, 217, .16),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.hero-right-logo-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,.10), transparent 52%, rgba(0,216,230,.12));
  pointer-events: none;
}

.hero-right-logo-gradient img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0, 184, 217, .22));
}

.hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
  padding-top: clamp(70px, 7vw, 118px);
}

@media (max-width: 1100px) {
  .brand.brand--image { min-width: 164px !important; }
  .brand-logo-img { width: 164px !important; }
  .hero-right-logo-gradient {
    position: relative;
    top: auto;
    right: auto;
    width: min(330px, 78vw);
    margin: 0 auto 18px;
  }
  .hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
    padding-top: 0;
  }
}

@media (max-width: 720px) {
  .brand.brand--image { min-width: 152px !important; }
  .brand-logo-img { width: 152px !important; }
  .hero-right-logo-gradient {
    width: min(292px, 84vw);
    padding: 14px 18px;
    border-radius: 22px;
  }
}

/* ================================================================
   Krankenhausalarm.de · Hero Brand Card Finalisierung
   Stand: 2026-06-16
   Autor: Krankenhausalarm.de
   Zweck: Hero wie Referenzbild: eine zentrale Krankenhausalarm.de-Karte
   mit fachlicher Unterzeile; Header-Logo besser sichtbar; Favicon PNG.
   ================================================================ */
.site-header {
  min-height: 62px !important;
  padding-block: 6px !important;
}

.brand.brand--image {
  min-width: 210px !important;
}

.brand-logo-img {
  width: clamp(198px, 13.8vw, 252px) !important;
  max-height: 58px !important;
}

.hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 680px;
  padding-top: clamp(74px, 8vw, 132px);
}

.hero-right-logo-gradient.hero-brand-card {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: 9;
  width: min(620px, 88%);
  margin: 0 auto clamp(34px, 4.2vw, 64px);
  padding: clamp(44px, 4.6vw, 72px) clamp(44px, 5.2vw, 82px) clamp(34px, 3.8vw, 56px);
  border-radius: 34px;
  text-align: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 217, 230, .32), transparent 38%),
    radial-gradient(circle at 86% 16%, rgba(0, 184, 217, .18), transparent 34%),
    linear-gradient(135deg, rgba(6, 18, 35, .88) 0%, rgba(7, 22, 40, .82) 48%, rgba(5, 13, 27, .94) 100%);
  border: 1px solid rgba(125, 211, 252, .28);
  box-shadow:
    0 46px 110px rgba(0,0,0,.42),
    0 0 92px rgba(0, 184, 217, .16),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
}

.hero-right-logo-gradient.hero-brand-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 46%, rgba(0,216,230,.10)),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 38%);
  pointer-events: none;
}

.hero-right-logo-gradient.hero-brand-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(430px, 100%);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(0, 184, 217, .26));
}

.hero-brand-card__rule {
  position: relative;
  z-index: 1;
  display: block;
  width: 68px;
  height: 3px;
  margin: 28px auto 24px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #16d4e6, transparent);
  box-shadow: 0 0 20px rgba(22, 212, 230, .38);
}

.hero-brand-card__caption {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  text-align: center;
}

.hero-brand-card__caption strong {
  color: #f8fafc;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -.025em;
  text-shadow: 0 10px 30px rgba(0,0,0,.38);
}

.hero-brand-card__caption span {
  color: rgba(248, 250, 252, .88);
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.35;
  font-weight: 600;
  text-shadow: 0 8px 24px rgba(0,0,0,.36);
}

.hero-shield-panel {
  display: none !important;
}

.hero-command.hero-command--hospital .device-laptop {
  width: min(760px, 100%);
  margin-top: 0 !important;
}

@media (max-width: 1180px) {
  .brand.brand--image { min-width: 190px !important; }
  .brand-logo-img { width: 190px !important; }
  .hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
    min-height: auto;
    padding-top: 20px;
  }
  .hero-right-logo-gradient.hero-brand-card {
    width: min(560px, 92%);
    margin-bottom: 28px;
  }
}

@media (max-width: 720px) {
  .site-header { min-height: 58px !important; }
  .brand.brand--image { min-width: 162px !important; }
  .brand-logo-img { width: 162px !important; max-height: 50px !important; }
  .hero-right-logo-gradient.hero-brand-card {
    width: min(330px, 92vw);
    padding: 32px 24px 28px;
    border-radius: 26px;
  }
  .hero-right-logo-gradient.hero-brand-card img {
    width: min(260px, 100%);
  }
  .hero-brand-card__rule {
    margin: 20px auto 18px;
  }
}


/* ================================================================
   Krankenhausalarm.de · KEL-Lesbarkeit und Logo-Skalierung
   Stand: 2026-06-16
   Autor: Krankenhausalarm.de
   Zweck: Header-Logo sichtbar vergrößern, Hero-Brand-Card kompakter
   darstellen und den KEL-Prozessbereich kontrastreich lesbar machen.
   ================================================================ */
.site-header {
  min-height: 74px !important;
  padding-block: 8px !important;
  border-top: 3px solid rgba(0, 214, 224, .72);
}

.brand.brand--image {
  min-width: clamp(220px, 16vw, 286px) !important;
}

.brand-logo-img {
  width: clamp(220px, 16vw, 286px) !important;
  max-height: 64px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.hero-right-logo-gradient.hero-brand-card {
  width: min(470px, 76%) !important;
  padding: clamp(30px, 3.2vw, 44px) clamp(32px, 4vw, 52px) clamp(26px, 3vw, 38px) !important;
  margin-bottom: clamp(28px, 3.4vw, 46px) !important;
  border-radius: 30px !important;
}

.hero-right-logo-gradient.hero-brand-card img {
  width: min(330px, 100%) !important;
}

.hero-brand-card__rule {
  width: 62px !important;
  margin: 22px auto 18px !important;
}

.hero-brand-card__caption strong {
  font-size: clamp(18px, 1.3vw, 22px) !important;
}

.hero-brand-card__caption span {
  font-size: clamp(15px, 1vw, 17px) !important;
}

.kel-usecase.kel-process {
  background:
    radial-gradient(circle at 16% 14%, rgba(0, 216, 230, .24), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(37, 99, 235, .18), transparent 32%),
    linear-gradient(135deg, rgba(7, 18, 34, .98) 0%, rgba(8, 34, 54, .97) 48%, rgba(7, 17, 32, .98) 100%) !important;
  border: 1px solid rgba(0, 216, 230, .24) !important;
  color: #f8fafc !important;
  box-shadow:
    0 34px 96px rgba(15, 23, 42, .24),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.kel-usecase.kel-process::before {
  background:
    linear-gradient(90deg, rgba(7, 18, 34, .96) 0%, rgba(7, 22, 38, .89) 42%, rgba(7, 18, 34, .82) 100%),
    url('../img/header-krankenhausalarm.jpg') right center / cover no-repeat !important;
  opacity: .82 !important;
  filter: saturate(.88) contrast(1.08) !important;
}

.kel-usecase.kel-process::after {
  background: radial-gradient(circle, rgba(0, 216, 230, .22), transparent 68%) !important;
}

.kel-process__intro .section-label,
.kel-process__eyebrow {
  color: #7ddcff !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

.kel-process__intro h3 {
  color: #ffffff !important;
  text-shadow: 0 16px 38px rgba(0,0,0,.50) !important;
}

.kel-process__intro p {
  color: rgba(235, 247, 255, .88) !important;
  text-shadow: 0 12px 30px rgba(0,0,0,.42) !important;
}

.kel-process__badges span {
  background: rgba(15, 35, 58, .72) !important;
  border-color: rgba(125, 211, 252, .26) !important;
  color: rgba(248, 250, 252, .92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.kel-process__timeline::before {
  background: linear-gradient(180deg, rgba(125,211,252,.18), rgba(0,216,230,.76), rgba(125,211,252,.18)) !important;
}

.kel-process__marker {
  background: linear-gradient(180deg, #0f72cf, #08458d) !important;
  border-color: rgba(191, 229, 255, .94) !important;
  color: #fff !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, .28),
    0 0 0 9px rgba(14, 165, 233, .14) !important;
}

.kel-process__card {
  background: rgba(7, 18, 34, .72) !important;
  border-color: rgba(125, 211, 252, .22) !important;
  box-shadow:
    0 22px 50px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

.kel-process__item:hover .kel-process__card {
  background: rgba(9, 28, 48, .82) !important;
  border-color: rgba(0, 216, 230, .40) !important;
  box-shadow:
    0 30px 68px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.kel-process__card h4 {
  color: #ffffff !important;
  text-shadow: 0 12px 28px rgba(0,0,0,.42) !important;
}

.kel-process__card p {
  color: rgba(226, 242, 255, .86) !important;
}

@media (max-width: 1180px) {
  .brand.brand--image { min-width: 210px !important; }
  .brand-logo-img { width: 210px !important; max-height: 60px !important; }
  .hero-right-logo-gradient.hero-brand-card {
    width: min(430px, 92%) !important;
  }
}

@media (max-width: 720px) {
  .site-header { min-height: 62px !important; }
  .brand.brand--image { min-width: 178px !important; }
  .brand-logo-img { width: 178px !important; max-height: 54px !important; }
  .hero-right-logo-gradient.hero-brand-card {
    width: min(300px, 90vw) !important;
    padding: 24px 22px 22px !important;
  }
  .hero-right-logo-gradient.hero-brand-card img {
    width: min(220px, 100%) !important;
  }
}


/* ================================================================
   Krankenhausalarm.de · Header Accent + Brand Panorama
   Stand: 2026-06-16
   Zweck: horizontale Live-Linie im Header und Einbindung des
   Krankenhausalarmierung-Keyvisuals als Codebestandteil.
   ================================================================ */
.site-header{
  position: sticky !important;
  top: 0 !important;
  overflow: hidden;
}

.header-accent{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:1px;
  background:rgba(0,214,255,.18);
  pointer-events:none;
  z-index:3;
}

.header-accent::after{
  content:"";
  position:absolute;
  top:-1px;
  left:-24%;
  width:24%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent 0%, rgba(0,214,255,0) 8%, rgba(0,214,255,.95) 42%, rgba(0,255,180,.96) 62%, rgba(0,214,255,.85) 80%, transparent 100%);
  box-shadow:0 0 8px rgba(0,214,255,.55), 0 0 16px rgba(0,214,255,.32);
  animation:fnxHeaderScan 12s linear infinite;
}

@keyframes fnxHeaderScan{
  from{left:-24%;}
  to{left:124%;}
}

.status-dot::before{
  animation:fnxOnlinePulse 2.4s ease-in-out infinite;
}

@keyframes fnxOnlinePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,255,150,.42);}
  50%{box-shadow:0 0 0 6px rgba(0,255,150,.08);}
}

.brand.brand--image{
  min-width: clamp(178px, 12vw, 230px) !important;
}

.brand-logo-img{
  width: clamp(178px, 12vw, 230px) !important;
  max-height: 58px !important;
}

.hero-brand-card{
  width: min(470px, 42vw) !important;
  min-height: 300px !important;
  padding: clamp(34px, 4vw, 54px) !important;
}

.hero-brand-card img{
  width: min(310px, 70%) !important;
  height: auto !important;
  margin-inline:auto;
}

.brand-panorama-section{
  position:relative;
  background:linear-gradient(180deg,#f7fbfd 0%,#eef6f8 48%,#ffffff 100%);
  padding:clamp(72px,7vw,116px) clamp(20px,4vw,64px);
  overflow:hidden;
}

.brand-panorama-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 12%, rgba(0,184,217,.12), transparent 32%),
    radial-gradient(circle at 84% 22%, rgba(0,255,180,.08), transparent 30%);
  pointer-events:none;
}

.brand-panorama-shell{
  position:relative;
  z-index:1;
  max-width:1320px;
  margin:0 auto;
}

.brand-panorama-shell > h2{
  margin:10px 0 10px;
  color:#0b1220;
  font-size:clamp(32px,4vw,58px);
  line-height:.98;
  letter-spacing:-.055em;
}

.brand-panorama-shell > p:not(.legal-note){
  max-width:760px;
  color:#415466;
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.7;
  margin:0 0 28px;
}

.brand-panorama{
  margin:0;
  border-radius:32px;
  overflow:hidden;
  background:#071827;
  border:1px solid rgba(0,184,217,.22);
  box-shadow:0 38px 96px -48px rgba(4,22,36,.6), 0 0 0 1px rgba(255,255,255,.38) inset;
}

.brand-panorama img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.brand-panorama-note{
  margin-top:14px;
  color:#607180;
}

@media (max-width: 980px){
  .brand.brand--image{min-width:156px !important;}
  .brand-logo-img{width:156px !important;max-height:50px !important;}
  .hero-brand-card{width:min(420px,92vw) !important;min-height:240px !important;}
  .hero-brand-card img{width:min(250px,74%) !important;}
}

@media (max-width: 640px){
  .brand-panorama-section{padding:58px 18px;}
  .brand-panorama{border-radius:22px;}
}

@media (prefers-reduced-motion: reduce){
  .header-accent::after,
  .status-dot::before{
    animation:none !important;
  }
}


/* Krankenhausalarm.de · Krise-Repositionierung · 2026-06-18 */
.crisis-positioning{padding:96px 40px;background:linear-gradient(180deg,#ffffff 0%,#f6f9fc 100%);color:#0b1220}
.crisis-positioning__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:40px;align-items:center}
.crisis-positioning__copy h2{font-size:clamp(34px,4vw,58px);line-height:1.04;margin:10px 0 18px;color:#0b1220;letter-spacing:-.04em}
.crisis-positioning__copy p{font-size:18px;line-height:1.68;color:#475569;margin:0 0 16px;max-width:760px}
.crisis-positioning__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.crisis-positioning__secondary{background:#0b1220;color:#f8fafc;border-color:rgba(15,23,42,.15)}
.crisis-positioning__panel{display:grid;grid-template-columns:1fr 1fr;gap:16px}.crisis-card{border:1px solid rgba(15,23,42,.10);border-radius:22px;background:#fff;padding:22px;box-shadow:0 18px 50px rgba(15,23,42,.08);min-height:150px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.crisis-card:hover{transform:translateY(-3px);box-shadow:0 22px 70px rgba(15,23,42,.12);border-color:rgba(37,99,235,.22)}.crisis-card strong{display:block;font-size:18px;color:#0b1220;margin-bottom:10px}.crisis-card span{display:block;color:#64748b;line-height:1.55}.crisis-scenarios{padding:96px 40px}.scenario-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px}.scenario-card{border:1px solid rgba(15,23,42,.10);border-radius:24px;background:#fff;padding:26px;box-shadow:0 16px 48px rgba(15,23,42,.07)}.scenario-card h3{margin:0 0 12px;color:#0b1220;font-size:20px;line-height:1.25}.scenario-card p{margin:0;color:#64748b;line-height:1.62}.hero-copy h1{max-width:980px}.hero-subtitle{max-width:880px}@media(max-width:980px){.crisis-positioning{padding:72px 22px}.crisis-positioning__grid{grid-template-columns:1fr}.scenario-grid{grid-template-columns:1fr 1fr}.crisis-positioning__panel{grid-template-columns:1fr 1fr}}@media(max-width:640px){.scenario-grid,.crisis-positioning__panel{grid-template-columns:1fr}.crisis-positioning__actions .btn{width:100%;justify-content:center}.crisis-positioning__copy p{font-size:16px}}

/* ================================================================
   Krankenhausalarm.de · Bildplatzierung und Asset-Fix
   Stand: 2026-06-18
   Autor: Krankenhausalarm.de
   Zweck: konsistente Platzierung vorhandener Bilder, reparierte Logo-/Favicon-Pfade
   und ruhiger Klinik-Panorama-Bereich ohne übergroßes quadratisches Schild.
   ================================================================ */
.brand-logo-img,
.footer-brand-logo-img,
.hero-right-logo-gradient.hero-brand-card img,
.brand-panorama__caption img {
  image-rendering: auto;
}

.brand.brand--image {
  min-width: clamp(188px, 13vw, 248px) !important;
}

.brand-logo-img {
  width: clamp(188px, 13vw, 248px) !important;
  max-height: 64px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.footer-brand-logo-img {
  width: min(260px, 100%) !important;
  max-height: 88px !important;
  object-fit: contain !important;
}

.hero-right-logo-gradient.hero-brand-card {
  width: min(500px, 78%) !important;
  min-height: 250px !important;
  padding: clamp(28px, 3.2vw, 44px) clamp(30px, 3.8vw, 52px) clamp(24px, 3vw, 38px) !important;
}

.hero-right-logo-gradient.hero-brand-card > img {
  width: min(360px, 88%) !important;
  height: auto !important;
  margin-inline: auto !important;
}

.brand-panorama.brand-panorama--clinic {
  position: relative;
  min-height: clamp(340px, 43vw, 580px);
  background: #071827;
  isolation: isolate;
}

.brand-panorama.brand-panorama--clinic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 18, 34, .94) 0%, rgba(7, 18, 34, .72) 42%, rgba(7, 18, 34, .18) 100%),
    linear-gradient(180deg, rgba(7, 18, 34, .08) 0%, rgba(7, 18, 34, .72) 100%);
  pointer-events: none;
}

.brand-panorama.brand-panorama--clinic > img {
  width: 100%;
  height: clamp(340px, 43vw, 580px);
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.04);
}

.brand-panorama__caption {
  position: absolute;
  left: clamp(22px, 4vw, 64px);
  bottom: clamp(22px, 4vw, 58px);
  z-index: 2;
  display: grid;
  gap: 14px;
  width: min(480px, calc(100% - 44px));
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 12%, rgba(0, 184, 217, .24), transparent 34%),
    rgba(7, 18, 34, .76);
  border: 1px solid rgba(125, 211, 252, .24);
  box-shadow: 0 26px 76px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(18px) saturate(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
}

.brand-panorama__caption img {
  display: block;
  width: min(330px, 100%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0, 184, 217, .18));
}

.brand-panorama__caption span {
  color: rgba(248,250,252,.90);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.45;
  font-weight: 650;
}

@media (max-width: 980px) {
  .brand.brand--image { min-width: 168px !important; }
  .brand-logo-img { width: 168px !important; max-height: 54px !important; }
  .hero-right-logo-gradient.hero-brand-card { width: min(360px, 92vw) !important; min-height: 220px !important; }
  .hero-right-logo-gradient.hero-brand-card > img { width: min(270px, 92%) !important; }
}

@media (max-width: 640px) {
  .brand.brand--image { min-width: 154px !important; }
  .brand-logo-img { width: 154px !important; max-height: 50px !important; }
  .brand-panorama.brand-panorama--clinic,
  .brand-panorama.brand-panorama--clinic > img {
    min-height: 430px;
    height: 430px;
  }
  .brand-panorama.brand-panorama--clinic::before {
    background:
      linear-gradient(180deg, rgba(7, 18, 34, .72) 0%, rgba(7, 18, 34, .42) 42%, rgba(7, 18, 34, .88) 100%);
  }
  .brand-panorama__caption {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    border-radius: 22px;
  }
  .brand-panorama__caption img {
    width: min(260px, 100%);
  }
}


/* ================================================================
   Krankenhausalarm.de · Headergrafik und Schildgrößenkorrektur
   Stand: 2026-06-18
   Autor: Krankenhausalarm.de
   Zweck: Logo-Text in ursprünglicher Größe belassen, Schildwirkung über
   aktualisierte Bilddatei erhöhen und neue Headergrafik sauber platzieren.
   ================================================================ */
.hero-command.hero-command--hospital .hero-hospital-bg img {
  object-position: center center;
}

.brand-panorama.brand-panorama--clinic > img {
  object-position: center center;
}

@media (min-width: 981px) {
  .hero-command.hero-command--hospital .hero-hospital-overlay {
    background:
      linear-gradient(90deg, rgba(7,18,37,.94) 0%, rgba(7,18,37,.78) 34%, rgba(7,18,37,.34) 68%, rgba(7,18,37,.18) 100%),
      radial-gradient(circle at 20% 18%, rgba(0,184,217,.18), transparent 35%);
  }
}

@media (max-width: 980px) {
  .hero-command.hero-command--hospital .hero-hospital-bg img,
  .brand-panorama.brand-panorama--clinic > img {
    object-position: 68% center;
  }
}

/* ================================================================
   Krankenhausalarm.de · Grafiktausch v008
   Stand: 2026-06-18
   Zweck: Gelieferte Shield-, Header- und Banner-Grafiken konsistent nutzen.
   ================================================================ */
.brand.brand--krankenhausalarm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 178px !important;
  text-decoration: none !important;
}

.brand-shield-img {
  display: block;
  width: clamp(42px, 3.3vw, 54px);
  height: clamp(42px, 3.3vw, 54px);
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 16px rgba(0, 184, 217, .22));
}

.brand-wordmark {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
}

.brand-wordmark strong {
  display: grid;
  gap: 0;
  font-size: clamp(14px, 1vw, 18px);
  line-height: .96;
  letter-spacing: .035em;
  font-weight: 900;
}

.brand-wordmark small {
  display: block;
  margin-top: 2px;
  max-width: 142px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(226, 232, 240, .72);
  font-size: 7px;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: none;
}

.hero-banner-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 34px;
  background: rgba(6, 17, 31, .62);
  border: 1px solid rgba(125, 211, 252, .24);
  box-shadow:
    0 38px 90px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  transform: translateY(22px);
}

.hero-banner-card picture,
.hero-banner-card img {
  display: block;
  width: 100%;
}

.hero-banner-card img {
  height: auto;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.03);
}

.hero-banner-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%, rgba(0,0,0,.22)),
    radial-gradient(circle at 18% 26%, rgba(0, 216, 230, .16), transparent 32%);
}

.hero-banner-card figcaption {
  position: absolute;
  left: clamp(18px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 26px);
  z-index: 2;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-banner-card figcaption span {
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(248,250,252,.92);
  background: rgba(2, 12, 23, .58);
  border: 1px solid rgba(125, 211, 252, .22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brand-panorama.brand-panorama--banner {
  border-radius: 34px;
  background: #06111f;
}

.brand-panorama.brand-panorama--banner picture,
.brand-panorama.brand-panorama--banner img {
  display: block;
  width: 100%;
}

.brand-panorama.brand-panorama--banner img {
  height: auto;
  object-fit: cover;
}

.footer-brand-lockup {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

.footer-brand-shield {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 12px 24px rgba(0, 184, 217, .20));
}

.footer-brand-wordmark {
  display: grid;
  gap: 4px;
}

.footer-brand-wordmark strong {
  color: #f8fafc;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .035em;
  font-weight: 900;
}

.footer-brand-wordmark small {
  color: rgba(226,232,240,.68);
  font-size: 11px;
}

.kel-usecase.kel-process::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.74) 34%, rgba(255,255,255,.54) 100%),
    url('../img/header-krankenhausalarm.jpg') right center / cover no-repeat !important;
}

@media (max-width: 1180px) {
  .brand-wordmark small { display: none; }
  .brand.brand--krankenhausalarm { min-width: 150px !important; }
}

@media (max-width: 720px) {
  .brand-shield-img {
    width: 44px;
    height: 44px;
  }
  .brand-wordmark strong {
    font-size: 14px;
  }
  .hero-banner-card {
    transform: none;
    border-radius: 24px;
  }
  .hero-banner-card figcaption {
    display: none;
  }
  .footer-brand-lockup {
    align-items: flex-start;
  }
}

/* ════════════════════════════════════════════════════════════════
   HEADER- & HERO-VERFEINERUNG · 2026-06-18 (v009)
   Behebt Nav-Überfüllung, ♿-Button-Clipping und Hero-Skalierung.
   Konsolidiert am Dateiende → gewinnt die Kaskade.
   ════════════════════════════════════════════════════════════════ */

/* Etwas mehr Luft zwischen Brand und Nav, kompaktere Links */
.site-header { gap: 10px; }
.main-nav { gap: 2px; }
.main-nav a { padding: 8px 11px; font-size: 12.5px; }

/* ♿-Button auf dem Desktop als kompaktes Symbol (kein doppeltes
   „Barrierefreiheit" mehr neben dem Seiten-Link) */
.nav-a11y-btn { padding: 7px 11px; gap: 6px; }
.nav-a11y-btn .nav-a11y-icon { font-size: 15px; line-height: 1; }
.nav-a11y-btn .nav-a11y-label { font-size: 12px; }

@media (min-width: 1201px) {
  /* Label verbergen → nur Symbol, spart spürbar Breite */
  .nav-a11y-btn .nav-a11y-label { display: none; }
  .nav-a11y-btn { padding: 8px 10px; }
}

/* Umbruchpunkt früher: volle Desktop-Nav nur, wenn wirklich Platz ist.
   Zwischen 1100–1200px klappte die Leiste bisher nicht ein und der
   letzte Button wurde abgeschnitten. */
@media (max-width: 1200px) {
  .main-nav {
    position: absolute;
    top: 64px;
    left: 12px;
    right: 12px;
    display: none;
    flex-direction: column;
    gap: 2px;
    background: var(--navy-800);
    border: 1px solid rgba(0,184,217,.18);
    border-radius: var(--r-md);
    padding: 10px;
    box-shadow: var(--shadow-xl);
    z-index: 600;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 14px; font-size: 15px; }
  .nav-a11y-btn {
    justify-content: flex-start;
    width: 100%;
    margin-top: 4px;
    padding: 12px 14px;
    font-size: 15px;
  }
  .nav-a11y-btn .nav-a11y-label { display: inline; }   /* im Menü mit Text */
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .header-cta { display: none; }
  .status-dot { display: none; }
}

/* Hero-Überschrift: so dimensioniert, dass auch das längste Kompositum
   „Krankenhausbetrieb" sauber in die Spalte passt – ohne harten
   Wortumbruch (Headless-Browser haben keine dt. Trennmuster). */
.hero-command h1 {
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.03em;
  overflow-wrap: normal;
  word-break: normal;
}
.hero-copy {
  max-width: 560px;
  min-width: 0;
}
.hero-command h1 .accent { margin-top: 4px; }

/* Auf schmalen Phones „Krankenhausbetrieb" sicher in die Spalte
   skalieren (sonst stößt das letzte Zeichen an den Rand). */
@media (max-width: 560px) {
  .hero-command.hero-command--hospital h1 {
    font-size: clamp(23px, 7.4vw, 30px);
    letter-spacing: -.02em;
  }
}

/* Sicherheitsnetz gegen abgeschnittene lange deutsche Komposita:
   Überschriften dürfen umbrechen/trennen statt aus dem Container zu
   laufen (z. B. „Krankenhausalarmierung"). Echte Browser mit lang="de"
   trennen sauber per Silbe; ansonsten greift der Umbruch-Fallback. */
h1, h2, h3, .contact-box h1, .legal-card h1 {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.contact-box h1 {
  font-size: clamp(24px, 2.7vw, 32px);
  line-height: 1.12;
}

/* ================================================================
   Krankenhausalarm.de · Header-Shield Skalierung
   Stand: 2026-06-18
   Autor: Krankenhausalarm.de
   Zweck: Nur das Shield-Logo im Header vergrößern; Wortmarke und
   Header-Typografie bleiben unverändert.
   ================================================================ */
.brand.brand--krankenhausalarm {
  gap: 12px !important;
}

.brand-shield-img {
  width: clamp(52px, 4.1vw, 68px) !important;
  height: clamp(52px, 4.1vw, 68px) !important;
  filter: drop-shadow(0 10px 20px rgba(0, 184, 217, .24)) !important;
}

@media (max-width: 720px) {
  .brand-shield-img {
    width: 52px !important;
    height: 52px !important;
  }
}


/* ================================================================
   Krankenhausalarm.de · Header-Logo und Hero-Bild Korrektur
   Stand: 2026-06-18
   Autor: Krankenhausalarm.de
   Zweck: Shield im Header nochmals vergrößern und Hero-Grafik so
   platzieren, dass sie keine angrenzenden Inhalte überdeckt.
   ================================================================ */
.site-header {
  min-height: 78px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  overflow: visible !important;
}

.brand.brand--krankenhausalarm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: clamp(238px, 18vw, 310px) !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

.brand-shield-img {
  width: clamp(68px, 5.1vw, 86px) !important;
  height: clamp(68px, 5.1vw, 86px) !important;
  object-fit: contain !important;
  object-position: center !important;
  flex: 0 0 clamp(68px, 5.1vw, 86px) !important;
  margin: -3px 0 -3px -2px !important;
  filter: drop-shadow(0 12px 24px rgba(0, 184, 217, .28)) !important;
}

.brand-wordmark {
  position: relative !important;
  z-index: 2 !important;
  min-width: 132px !important;
}

.brand-wordmark small {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Hero-Grafik nicht mehr nach unten in die nächste Sektion schieben. */
.hero-command.hero-command--hospital .hero-command__inner {
  align-items: center !important;
}

.hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
  align-self: center !important;
  justify-content: center !important;
  min-height: auto !important;
  padding-top: clamp(18px, 3vw, 38px) !important;
  padding-bottom: clamp(18px, 3vw, 38px) !important;
  transform: none !important;
  filter: drop-shadow(0 30px 64px rgba(0,0,0,.32)) !important;
  z-index: 2 !important;
}

.hero-banner-card {
  width: min(720px, 100%) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  transform: none !important;
  z-index: 1 !important;
}

.hero-banner-card img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 1180px) {
  .site-header {
    min-height: 72px !important;
  }
  .brand.brand--krankenhausalarm {
    min-width: clamp(204px, 28vw, 260px) !important;
    gap: 13px !important;
  }
  .brand-shield-img {
    width: 62px !important;
    height: 62px !important;
    flex-basis: 62px !important;
  }
  .brand-wordmark small {
    display: block !important;
    font-size: 6.5px !important;
  }
}

@media (max-width: 720px) {
  .site-header {
    min-height: 66px !important;
    padding-inline: 16px !important;
  }
  .brand.brand--krankenhausalarm {
    min-width: 0 !important;
    gap: 10px !important;
  }
  .brand-shield-img {
    width: 56px !important;
    height: 56px !important;
    flex-basis: 56px !important;
    margin-left: 0 !important;
  }
  .brand-wordmark strong {
    font-size: 13px !important;
  }
  .brand-wordmark small {
    display: none !important;
  }
  .hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
    padding-top: 12px !important;
    padding-bottom: 0 !important;
  }
  .hero-banner-card {
    width: 100% !important;
    border-radius: 22px !important;
  }
}

/* ================================================================
   Patch v011 · Headerbanner höher im Hero-Hintergrund platzieren
   Ziel: Die Banner-Grafik sitzt im oberen Bereich des darunterliegenden
   Krankenhausbildes und überdeckt keine nachfolgende Sektion.
   ================================================================ */
.hero-command.hero-command--hospital .hero-command__inner {
  align-items: start !important;
}

.hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
  align-self: start !important;
  padding-top: clamp(4px, 1.4vw, 18px) !important;
  padding-bottom: clamp(28px, 4vw, 56px) !important;
  margin-top: clamp(0px, 1vh, 12px) !important;
  transform: none !important;
}

.hero-command.hero-command--hospital .hero-banner-card {
  width: min(760px, 100%) !important;
  margin: 0 auto !important;
}

@media (max-width: 1180px) {
  .hero-command.hero-command--hospital .hero-command__inner {
    align-items: center !important;
  }

  .hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
    align-self: center !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }
}

/* ================================================================
   Patch v012 · Headerbanner kleiner, höher und weiter links
   Ziel: Das Headerbanner liegt ruhiger im oberen Bereich des
   Krankenhausbildes und verdeckt weniger Hintergrundmotiv.
   ================================================================ */
@media (min-width: 1181px) {
  .hero-command.hero-command--hospital .hero-command__inner {
    align-items: start !important;
  }

  .hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
    align-self: start !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
    padding-bottom: clamp(36px, 4.8vw, 68px) !important;
    margin-top: clamp(-42px, -3vw, -24px) !important;
    margin-left: clamp(-86px, -5vw, -54px) !important;
    transform: none !important;
  }

  .hero-command.hero-command--hospital .hero-banner-card {
    width: min(650px, 92%) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

@media (max-width: 1180px) {
  .hero-command.hero-command--hospital .hero-screenshot-wrap.hero-device-showcase {
    margin-left: 0 !important;
  }

  .hero-command.hero-command--hospital .hero-banner-card {
    width: min(680px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ================================================================
   Krankenhausalarm.de · Typografie-/Zeilenumbruch-Korrektur v013
   Stand: 2026-06-18
   Autor: Krankenhausalarm.de
   Zweck: Harte und unprofessionell wirkende Zeilenumbrüche vermeiden.
   ================================================================ */
html[lang="de"] h1,
html[lang="de"] h2,
html[lang="de"] h3,
html[lang="de"] p,
html[lang="de"] li,
html[lang="de"] .lead,
html[lang="de"] .hero-subtitle,
html[lang="de"] .section-head p {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

h1,
h2,
h3,
.section-head h2,
.hero-command h1,
.hero-command.hero-command--hospital h1,
.crisis-positioning__copy h2,
.brand-panorama-shell > h2,
.contact-care-copy h2,
.legal-card h1,
.contact-box h1 {
  text-wrap: pretty !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

p,
.lead,
.hero-subtitle,
.section-head p,
.scenario-card p,
.crisis-card span,
.contact-care-copy p,
.legal-card p,
.contact-box p {
  text-wrap: pretty;
}

.hero-command h1 .accent,
.hero-command.hero-command--hospital h1 .accent {
  display: inline !important;
  margin-top: 0 !important;
}

.hero-copy,
.hero-command.hero-command--hospital .hero-copy {
  max-width: min(760px, 100%) !important;
}

.hero-command.hero-command--hospital .hero-subtitle,
.hero-subtitle {
  max-width: min(820px, 100%) !important;
}

.section-head {
  max-width: 920px !important;
}

.section-head p {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.crisis-positioning__copy p,
.contact-care-copy p,
.legal-card p,
.contact-box p {
  max-width: 860px;
}

.address-lines,
.legal-address-lines {
  display: grid;
  gap: 3px;
  line-height: 1.65;
}

.address-lines strong,
.legal-address-lines strong {
  margin-bottom: 2px;
}

@media (max-width: 720px) {
  h1,
  h2,
  h3,
  .hero-command h1,
  .hero-command.hero-command--hospital h1,
  .section-head h2,
  .contact-care-copy h2,
  .crisis-positioning__copy h2 {
    text-wrap: pretty !important;
    overflow-wrap: break-word !important;
  }

  .hero-command.hero-command--hospital h1 {
    line-height: 1.08 !important;
  }

  .hero-command h1 .accent,
  .hero-command.hero-command--hospital h1 .accent {
    display: inline !important;
  }
}


/* KAEP practice additions · 2026-06-25 v018 */
.kaep-practice-section{position:relative;overflow:hidden;padding:96px 40px;background:linear-gradient(135deg,#f8fafc 0%,#eef7fb 54%,#ffffff 100%);color:#0b1220;border-top:1px solid rgba(17,34,64,.08);border-bottom:1px solid rgba(17,34,64,.08)}
.kaep-practice-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:42px;align-items:center}.kaep-practice-copy .lead{font-size:18px;line-height:1.75;color:#334155}.kaep-practice-copy p:not(.lead){color:#475569;line-height:1.75}.kaep-practice-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.kaep-practice-panel{display:grid;gap:14px}.kaep-check{background:#fff;border:1px solid rgba(17,34,64,.10);border-radius:18px;padding:20px 22px;box-shadow:0 16px 42px rgba(15,23,42,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.kaep-check:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(15,23,42,.12);border-color:rgba(0,184,217,.28)}.kaep-check strong{display:block;color:#0b1220;font-size:17px;margin-bottom:6px}.kaep-check span{display:block;color:#475569;line-height:1.55}.kaep-hero-page{padding:120px 40px 88px;background:radial-gradient(circle at 10% 0%,rgba(0,184,217,.18),transparent 34%),linear-gradient(135deg,#0b1220 0%,#112240 100%);color:#fff}.kaep-hero-page__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.7fr);gap:42px;align-items:center}.kaep-hero-page h1{max-width:980px;color:#fff}.kaep-hero-page .lead{font-size:20px;line-height:1.75;color:rgba(255,255,255,.86)}.kaep-hero-page p:not(.lead){color:rgba(255,255,255,.78);line-height:1.7}.kaep-reference-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.25);backdrop-filter:blur(12px)}.kaep-reference-card strong{display:block;margin-bottom:16px;color:#fff}.kaep-reference-card ul{margin:0;padding-left:20px;color:rgba(255,255,255,.84);line-height:1.8}.kaep-detail-section{padding:96px 40px;background:#fff}.kaep-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.kaep-detail-card{border:1px solid rgba(17,34,64,.10);border-radius:20px;padding:24px;background:#fff;box-shadow:0 18px 48px rgba(15,23,42,.07)}.kaep-detail-card span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:#e6f9fd;color:#0090ab;font-weight:800;margin-bottom:14px}.kaep-detail-card h3{margin:0 0 10px;color:#0b1220}.kaep-detail-card p{margin:0;color:#475569;line-height:1.65}@media (max-width:900px){.kaep-practice-section,.kaep-hero-page,.kaep-detail-section{padding-left:22px;padding-right:22px}.kaep-practice-grid,.kaep-hero-page__grid{grid-template-columns:1fr}.kaep-detail-grid{grid-template-columns:1fr}}

/* ========================================================================== 
   Krankenhausalarm.de Relaunch · High-Tech Enterprise Website · 2026-06-25
   Autor: KRANKENHAUSALARM.DE
   ========================================================================== */
:root{--x-bg:#f8fafc;--x-card:#ffffff;--x-ink:#0b1220;--x-muted:#334155;--x-soft:#64748b;--x-line:rgba(15,23,42,.12);--x-navy:#0b1220;--x-navy2:#112240;--x-cyan:#00b8d9;--x-cyan2:#26d0f0;--x-red:#b01828;--x-radius:26px;--x-shadow:0 24px 80px rgba(15,23,42,.12);--x-shadow-dark:0 34px 120px rgba(0,0,0,.38)}
.kha-relaunch{background:var(--x-bg);color:var(--x-ink);font-family:inherit}.x-container{width:min(1500px,calc(100% - 64px));margin-inline:auto}.x-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--x-cyan2)}.x-kicker:before{content:"";width:8px;height:8px;border-radius:999px;background:var(--x-cyan);box-shadow:0 0 22px rgba(0,184,217,.75)}.x-kicker-dark{color:#006d83}.x-kicker-dark:before{background:#00b8d9}.x-lead{font-size:clamp(18px,1.55vw,23px);line-height:1.72;color:rgba(255,255,255,.88);max-width:900px}.x-hero{position:relative;isolation:isolate;overflow:hidden;min-height:760px;padding:158px 0 110px;background:linear-gradient(135deg,#07101f 0%,#0b1220 48%,#10354a 100%);color:#fff}.x-hero-compact{min-height:auto;padding:140px 0 96px}.x-hero-bg{position:absolute;inset:0;z-index:-3}.x-hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.08)}.x-hero-shade{position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 78% 18%,rgba(0,184,217,.25),transparent 30%),linear-gradient(90deg,rgba(7,16,31,.97) 0%,rgba(7,16,31,.91) 43%,rgba(7,16,31,.62) 100%)}.x-hero:after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 80%)}.x-orbit i{position:absolute;border-radius:999px;border:1px solid rgba(38,208,240,.22);box-shadow:inset 0 0 40px rgba(0,184,217,.08)}.x-orbit i:nth-child(1){width:620px;height:620px;right:-180px;top:110px}.x-orbit i:nth-child(2){width:360px;height:360px;right:180px;bottom:80px}.x-orbit i:nth-child(3){width:260px;height:260px;left:-80px;bottom:120px}.x-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.8fr);gap:72px;align-items:center}.x-hero-copy h1{margin:0 0 24px;font-size:clamp(48px,6.2vw,104px);line-height:.93;letter-spacing:-.07em;color:#fff;max-width:1100px;text-shadow:0 18px 60px rgba(0,0,0,.45)}.x-hero-copy p:not(.x-lead){color:rgba(255,255,255,.82)}.x-hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin:34px 0 28px}.x-trust-row{display:flex;flex-wrap:wrap;gap:10px;max-width:980px}.x-trust-row span{padding:9px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.88);font-size:13px;font-weight:800}.x-command-panel{position:relative;padding:30px;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.18);box-shadow:var(--x-shadow-dark);backdrop-filter:blur(18px);overflow:hidden}.x-command-panel:before{content:"";position:absolute;inset:-2px;background:radial-gradient(circle at 20% 0%,rgba(38,208,240,.32),transparent 32%);pointer-events:none}.x-panel-top{position:relative;display:flex;justify-content:space-between;gap:14px;margin-bottom:24px}.x-live,.x-time{display:inline-flex;align-items:center;min-height:30px;padding:6px 12px;border-radius:999px;background:rgba(0,184,217,.13);border:1px solid rgba(38,208,240,.25);color:#d9fbff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.x-live:before{content:"";width:7px;height:7px;margin-right:8px;border-radius:50%;background:#24f096;box-shadow:0 0 15px rgba(36,240,150,.9)}.x-command-panel h2{position:relative;margin:0 0 18px;color:#fff;font-size:28px;letter-spacing:-.035em}.x-progress{position:relative;height:12px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:24px}.x-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--x-cyan),var(--x-cyan2));box-shadow:0 0 30px rgba(0,184,217,.55)}.x-kpi-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}.x-kpi-grid div{padding:18px;border-radius:20px;background:rgba(2,8,23,.34);border:1px solid rgba(255,255,255,.12)}.x-kpi-grid strong{display:block;color:#fff;font-size:34px;line-height:1}.x-kpi-grid span{display:block;margin-top:6px;color:rgba(255,255,255,.74);font-size:13px}.x-signal-list{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:10px}.x-signal-list li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}.x-signal-list b{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:rgba(0,184,217,.16);color:#96f3ff}.x-signal-list span{color:rgba(255,255,255,.88);font-weight:800}.x-signal-list em{font-style:normal;color:#bbf7d0;font-size:12px;font-weight:900;text-transform:uppercase}.x-section{position:relative;padding:112px 0}.x-section-light{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);color:var(--x-ink)}.x-section-dark{background:radial-gradient(circle at 15% 0%,rgba(0,184,217,.16),transparent 32%),linear-gradient(135deg,#07101f 0%,#0b1220 60%,#112240 100%);color:#fff}.x-section-blue{background:linear-gradient(135deg,#0b1220 0%,#0a2d44 46%,#112240 100%);color:#fff}.x-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:58px;align-items:center}.x-section h2{margin:0 0 20px;font-size:clamp(34px,4vw,64px);line-height:1;letter-spacing:-.055em;color:var(--x-ink)}.x-section p{font-size:18px;line-height:1.78;color:var(--x-muted)}.x-on-dark h2,.x-section-dark h2,.x-section-blue h2{color:#fff}.x-on-dark p,.x-section-dark p,.x-section-blue p{color:rgba(255,255,255,.78)}.x-proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.x-proof-grid article,.x-feature-list div,.x-security-stack article{padding:24px;border-radius:24px;background:#fff;border:1px solid var(--x-line);box-shadow:var(--x-shadow)}.x-proof-grid strong,.x-feature-list strong,.x-security-stack strong{display:block;margin-bottom:8px;color:var(--x-ink);font-size:18px}.x-proof-grid span,.x-feature-list span,.x-security-stack span{display:block;color:#475569;line-height:1.62}.x-section-head{max-width:980px;margin:0 0 40px}.x-section-head p{max-width:920px}.x-area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.x-area-grid article{position:relative;padding:26px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.15);box-shadow:0 22px 58px rgba(0,0,0,.2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.x-area-grid article:hover{transform:translateY(-4px);border-color:rgba(38,208,240,.45);box-shadow:0 30px 80px rgba(0,0,0,.32)}.x-area-grid b{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:14px;background:rgba(0,184,217,.16);color:#a8f4ff;margin-bottom:18px}.x-area-grid h3{margin:0 0 10px;color:#fff;font-size:22px;letter-spacing:-.025em}.x-area-grid p{margin:0;color:rgba(255,255,255,.78);font-size:15px;line-height:1.68}.x-scenario-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.x-scenario-rail article{min-height:260px;padding:24px;border-radius:28px;background:#fff;border:1px solid var(--x-line);box-shadow:var(--x-shadow);display:flex;flex-direction:column}.x-scenario-rail span{width:max-content;padding:7px 10px;border-radius:999px;background:#e6f9fd;color:#006d83;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.x-scenario-rail h3{margin:22px 0 10px;color:var(--x-ink);font-size:23px;line-height:1.05}.x-scenario-rail p{margin:0;color:#475569;font-size:15px;line-height:1.65}.x-process-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.x-process-grid article{padding:22px;border-radius:24px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)}.x-process-grid b{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:#00b8d9;color:#06202a;margin-bottom:18px}.x-process-grid h3{margin:0 0 8px;color:#fff;font-size:20px}.x-process-grid p{font-size:14px;line-height:1.62;color:rgba(255,255,255,.78);margin:0}.x-feature-layout{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:58px;align-items:start}.x-feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.x-section-dark .x-security-stack article{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);box-shadow:none}.x-section-dark .x-security-stack strong{color:#fff}.x-section-dark .x-security-stack span{color:rgba(255,255,255,.76)}.x-security-stack{display:grid;gap:14px}.x-checkout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr);gap:58px;align-items:start}.x-check-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}.x-check-list li{position:relative;padding:18px 20px 18px 54px;border-radius:18px;background:#fff;border:1px solid var(--x-line);box-shadow:0 14px 38px rgba(15,23,42,.07);color:#1e293b;font-weight:750;line-height:1.55}.x-check-list li:before{content:"";position:absolute;left:20px;top:23px;width:13px;height:13px;border-radius:50%;background:#00b8d9;box-shadow:0 0 0 6px rgba(0,184,217,.12)}.x-final-cta{padding:110px 0;background:#07101f;color:#fff}.x-final-card{padding:56px;border-radius:36px;background:radial-gradient(circle at 10% 0%,rgba(0,184,217,.32),transparent 34%),linear-gradient(135deg,#0b1220,#112240);border:1px solid rgba(255,255,255,.14);box-shadow:var(--x-shadow-dark);text-align:center}.x-final-card h2{margin:0 auto 18px;max-width:900px;color:#fff;font-size:clamp(36px,4.4vw,72px);line-height:1;letter-spacing:-.055em}.x-final-card p{max-width:920px;margin:0 auto 30px;color:rgba(255,255,255,.8);font-size:19px;line-height:1.75}.site-footer{background:#07101f!important}.site-footer,.site-footer p,.site-footer a,.footer-tagline,.footer-legal{color:rgba(255,255,255,.78)!important}.footer-col-title,.footer-brand-wordmark strong{color:#fff!important}.main-nav a[href*="kaep.php"]{text-transform:none}.kha-relaunch .btn-primary{box-shadow:0 18px 48px rgba(0,184,217,.28)}@media (max-width:1180px){.x-hero-grid,.x-split,.x-feature-layout,.x-checkout{grid-template-columns:1fr}.x-area-grid{grid-template-columns:repeat(2,1fr)}.x-scenario-rail{grid-template-columns:repeat(2,1fr)}.x-process-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:760px){.x-container{width:min(100% - 34px,1500px)}.x-hero{padding:128px 0 74px;min-height:auto}.x-hero-copy h1{font-size:clamp(42px,14vw,64px)}.x-lead{font-size:18px}.x-command-panel{padding:22px;border-radius:26px}.x-kpi-grid,.x-proof-grid,.x-feature-list,.x-area-grid,.x-scenario-rail,.x-process-grid{grid-template-columns:1fr}.x-section{padding:74px 0}.x-section h2,.x-final-card h2{font-size:clamp(32px,11vw,46px)}.x-final-card{padding:34px 22px;border-radius:26px}.x-signal-list li{grid-template-columns:38px minmax(0,1fr);}.x-signal-list em{grid-column:2}.x-trust-row span{font-size:12px}.x-checkout{gap:24px}}

/* ================================================================
   KRANKENHAUSALARM.DE — Relaunch Fix v020
   Zweck: Hero lesbarer, keine abgeschnittenen Headlines, große SVG-Icons,
   mehr Inhaltsumfang, Scroll-Progressbar im Header.
   ================================================================ */
.header-scroll-progress{
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:0%;
  z-index:25;
  background:linear-gradient(90deg,#00b8d9,#26d0f0,#24f096);
  box-shadow:0 0 18px rgba(0,184,217,.75);
  transition:width .08s linear;
}
.site-header{position:sticky;top:0;overflow:visible!important;}
.glass-scroll-line{display:none!important;}

.kha-relaunch .x-container{width:min(1420px,calc(100% - 72px));}
.kha-relaunch .x-hero{
  min-height:680px;
  padding:132px 0 88px;
  overflow:hidden;
}
.kha-relaunch .x-hero-grid{
  grid-template-columns:minmax(0,0.95fr) minmax(390px,0.72fr);
  gap:46px;
}
.kha-relaunch .x-hero-copy{min-width:0;}
.kha-relaunch .x-hero-copy h1{
  max-width:900px;
  font-size:clamp(44px,4.8vw,76px)!important;
  line-height:1.02!important;
  letter-spacing:-.055em!important;
  overflow-wrap:normal;
  hyphens:none;
}
.kha-relaunch .x-lead{
  max-width:780px;
  font-size:clamp(17px,1.25vw,21px)!important;
  line-height:1.62!important;
}
.kha-relaunch .x-command-panel{max-width:520px;justify-self:end;}
.kha-relaunch .x-command-panel h2{font-size:26px!important;}
.kha-relaunch .x-kpi-grid strong{font-size:30px!important;}

.x-area-grid article,
.x-channel-grid article{
  min-height:260px;
}
.x-card-icon{
  display:inline-grid;
  place-items:center;
  width:68px;
  height:68px;
  border-radius:22px;
  margin:0 0 18px;
  background:linear-gradient(135deg,rgba(0,184,217,.22),rgba(38,208,240,.08));
  border:1px solid rgba(38,208,240,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 36px rgba(0,184,217,.12);
}
.x-card-icon svg{width:42px;height:42px;display:block;}
.x-card-icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.x-area-grid .x-card-icon{color:#96f3ff;}
.x-area-grid b{
  position:absolute;
  top:26px;
  right:26px;
  width:40px!important;
  height:40px!important;
  margin:0!important;
  font-size:13px;
}
.x-area-grid h3{font-size:20px!important;line-height:1.16!important;}
.x-area-grid p{font-size:14.5px!important;color:rgba(255,255,255,.82)!important;}

.x-section-white{background:#fff;color:var(--x-ink);}
.x-channel-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.x-channel-grid article{
  padding:28px;
  border-radius:28px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid #e2e8f0;
  box-shadow:0 22px 58px rgba(15,23,42,.08);
}
.x-channel-grid .x-card-icon{color:#0090ab;background:#e6f9fd;border-color:#bdeef6;}
.x-channel-grid h3{margin:0 0 10px;color:#0b1220;font-size:22px;line-height:1.12;letter-spacing:-.025em;}
.x-channel-grid p{margin:0;color:#334155!important;font-size:15px;line-height:1.7;}
.x-feature-list-wide{grid-template-columns:repeat(2,minmax(0,1fr));}

.kha-relaunch .x-section h2{
  font-size:clamp(32px,3.35vw,56px)!important;
  line-height:1.04!important;
}
.kha-relaunch .x-section{padding:96px 0;}

@media (max-width:1280px){
  .kha-relaunch .x-hero-grid{grid-template-columns:1fr;gap:34px;}
  .kha-relaunch .x-command-panel{justify-self:start;max-width:760px;width:100%;}
  .kha-relaunch .x-hero-copy h1{max-width:980px;font-size:clamp(42px,7vw,72px)!important;}
  .x-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .kha-relaunch .x-container{width:min(100% - 34px,1420px);}
  .kha-relaunch .x-hero{padding:116px 0 66px;}
  .kha-relaunch .x-hero-copy h1{font-size:clamp(36px,11.5vw,54px)!important;letter-spacing:-.045em!important;}
  .kha-relaunch .x-lead{font-size:17px!important;}
  .x-channel-grid,.x-feature-list-wide{grid-template-columns:1fr;}
  .x-card-icon{width:58px;height:58px;border-radius:19px;}
  .x-card-icon svg{width:35px;height:35px;}
}

/* === Krankenhausalarm.de High-Tech Relaunch v0.2.1 ===
   Ziel: vorherige starke Lösungssektion zurückführen, Hero entschärfen,
   große SVG-Icons und sichtbare Header-Scrollprogressbar beibehalten.
*/
.kha-relaunch .x-hero{
  min-height:auto!important;
  padding:138px 0 86px!important;
}
.kha-relaunch .x-hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr)!important;
  gap:52px!important;
}
.kha-relaunch .x-hero-copy h1{
  max-width:980px!important;
  font-size:clamp(44px,4.35vw,78px)!important;
  line-height:1.02!important;
  letter-spacing:-.058em!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance;
}
.kha-relaunch .x-lead{
  max-width:820px!important;
  font-size:clamp(17px,1.12vw,21px)!important;
  line-height:1.66!important;
}
.kha-relaunch .x-command-panel{
  max-width:500px!important;
}
.x-solution-return{
  position:relative;
  overflow:hidden;
  padding-top:118px!important;
  padding-bottom:96px!important;
}
.x-solution-return:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,184,217,.35),transparent);
}
.x-solution-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
  gap:64px;
  align-items:center;
}
.x-solution-copy h2{
  margin:0 0 22px;
  max-width:760px;
  font-size:clamp(38px,4.4vw,72px);
  line-height:.98;
  letter-spacing:-.06em;
  color:var(--x-ink);
  text-wrap:balance;
}
.x-solution-copy p{
  max-width:760px;
  color:#334155!important;
}
.x-solution-lead{
  font-size:20px!important;
  line-height:1.72!important;
  color:#1e293b!important;
}
.x-solution-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}
.btn-on-light{
  color:#0b1220!important;
  background:#fff!important;
  border-color:#cbd5e1!important;
  box-shadow:0 12px 30px rgba(15,23,42,.08)!important;
}
.x-solution-visual{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:34px;
  background:#0b1220;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 30px 90px rgba(15,23,42,.2);
}
.x-solution-visual:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,184,217,.08),rgba(11,18,32,.18));
  pointer-events:none;
  z-index:1;
}
.x-solution-visual img{
  display:block;
  width:100%;
  height:auto;
  min-height:320px;
  object-fit:cover;
}
.x-solution-visual figcaption{
  position:absolute;
  left:22px;
  bottom:22px;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.x-solution-visual figcaption span{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(11,18,32,.72);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}
.x-solution-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:42px;
}
.x-solution-cards article{
  position:relative;
  min-height:280px;
  padding:30px;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--x-line);
  box-shadow:0 18px 52px rgba(15,23,42,.1);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.x-solution-cards article:hover{
  transform:translateY(-4px);
  border-color:rgba(0,184,217,.36);
  box-shadow:0 30px 76px rgba(15,23,42,.16);
}
.x-solution-cards strong{
  display:block;
  margin:20px 0 10px;
  color:#0b1220;
  font-size:22px;
  line-height:1.16;
  letter-spacing:-.025em;
}
.x-solution-cards p{
  margin:0;
  color:#475569!important;
  font-size:15.5px;
  line-height:1.7;
}
.x-big-svg{
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  border-radius:28px;
  color:#007f98;
  background:linear-gradient(135deg,#e6f9fd,#ffffff);
  border:1px solid #bdeef6;
  box-shadow:inset 0 1px 0 #fff,0 18px 42px rgba(0,144,171,.12);
}
.x-big-svg svg{
  width:58px;
  height:58px;
}
.x-big-svg path{
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.kha-relaunch .x-card-icon{
  width:82px!important;
  height:82px!important;
  border-radius:26px!important;
}
.kha-relaunch .x-card-icon svg{
  width:52px!important;
  height:52px!important;
}
.header-scroll-progress{
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  height:4px!important;
  width:0%;
  z-index:40!important;
  pointer-events:none;
  background:linear-gradient(90deg,#00b8d9,#26d0f0,#b01828)!important;
  box-shadow:0 0 18px rgba(0,184,217,.75)!important;
  border-radius:0 999px 999px 0;
}
@media (max-width:1180px){
  .kha-relaunch .x-hero-grid,
  .x-solution-grid{
    grid-template-columns:1fr!important;
  }
  .kha-relaunch .x-command-panel{
    justify-self:start!important;
  }
  .x-solution-cards{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .kha-relaunch .x-hero{
    padding:122px 0 68px!important;
  }
  .kha-relaunch .x-hero-copy h1{
    font-size:clamp(40px,12vw,58px)!important;
    letter-spacing:-.052em!important;
  }
  .x-solution-return{
    padding-top:76px!important;
    padding-bottom:68px!important;
  }
  .x-solution-copy h2{
    font-size:clamp(34px,10vw,48px);
  }
  .x-solution-visual{
    border-radius:24px;
  }
  .x-solution-visual img{
    min-height:220px;
  }
  .x-solution-cards article{
    min-height:auto;
    padding:24px;
    border-radius:24px;
  }
  .x-big-svg{
    width:74px;
    height:74px;
    border-radius:24px;
  }
  .x-big-svg svg{
    width:48px;
    height:48px;
  }
}

/* ================================================================
   Krankenhausalarm.de · KEL-Prozesskarte Restore v0.2.2
   Zweck: frühere Glas-Timeline mit nummerierten Prozessschritten
   sichtbar wiederherstellen.
   ================================================================ */
.kel-process-restored{
  padding:28px 40px 88px!important;
  background:#ffffff!important;
  overflow:hidden;
}
.kel-process-restored .container{
  max-width:1240px;
  margin:0 auto;
}
.kel-process-restored .kel-usecase.kel-process{
  margin:0 auto!important;
  min-height:660px;
  display:grid!important;
  grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr)!important;
  align-items:center!important;
  background:
    radial-gradient(circle at 16% 14%, rgba(0,216,230,.24), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(37,99,235,.18), transparent 32%),
    linear-gradient(135deg, rgba(7,18,34,.98) 0%, rgba(8,34,54,.97) 48%, rgba(7,17,32,.98) 100%)!important;
  border:1px solid rgba(0,216,230,.32)!important;
  border-radius:34px!important;
  box-shadow:0 34px 96px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.kel-process-restored .kel-usecase.kel-process::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,18,34,.94) 0%, rgba(7,22,38,.86) 42%, rgba(7,18,34,.78) 100%),
    url('../img/header-krankenhausalarm.jpg') right center / cover no-repeat!important;
  opacity:.86!important;
  filter:saturate(.9) contrast(1.08)!important;
}
.kel-process-restored .kel-usecase.kel-process::after{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  right:-120px;
  bottom:-160px;
  background:radial-gradient(circle, rgba(0,216,230,.22), transparent 68%)!important;
  pointer-events:none;
}
.kel-process-restored .kel-usecase.kel-process > *{
  position:relative;
  z-index:1;
}
.kel-process-restored .kel-process__intro h3{
  color:#ffffff!important;
  font-size:clamp(38px,3.9vw,66px)!important;
  line-height:1.08!important;
  letter-spacing:-.06em!important;
  text-shadow:0 16px 38px rgba(0,0,0,.50)!important;
}
.kel-process-restored .kel-process__intro p{
  color:rgba(235,247,255,.88)!important;
  font-size:16px!important;
  line-height:1.75!important;
  text-shadow:0 12px 30px rgba(0,0,0,.42)!important;
}
.kel-process-restored .kel-process__intro .section-label,
.kel-process-restored .kel-process__eyebrow{
  color:#7ddcff!important;
  text-shadow:0 8px 24px rgba(0,0,0,.45)!important;
}
.kel-process-restored .kel-process__badges span{
  background:rgba(15,35,58,.72)!important;
  border-color:rgba(125,211,252,.26)!important;
  color:rgba(248,250,252,.92)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.kel-process-restored .kel-process__timeline::before{
  background:linear-gradient(180deg, rgba(125,211,252,.18), rgba(0,216,230,.76), rgba(125,211,252,.18))!important;
  width:3px!important;
}
.kel-process-restored .kel-process__marker{
  background:linear-gradient(180deg,#0f72cf,#08458d)!important;
  border:6px solid rgba(191,229,255,.94)!important;
  color:#ffffff!important;
  box-shadow:0 18px 36px rgba(0,0,0,.28),0 0 0 9px rgba(14,165,233,.14)!important;
}
.kel-process-restored .kel-process__card{
  background:rgba(7,18,34,.72)!important;
  border:1px solid rgba(125,211,252,.22)!important;
  border-radius:24px!important;
  box-shadow:0 22px 50px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(14px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.08)!important;
}
.kel-process-restored .kel-process__item:hover .kel-process__card{
  background:rgba(9,28,48,.82)!important;
  border-color:rgba(0,216,230,.40)!important;
  box-shadow:0 30px 68px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.kel-process-restored .kel-process__card h4{
  color:#ffffff!important;
  text-shadow:0 12px 28px rgba(0,0,0,.42)!important;
}
.kel-process-restored .kel-process__card p{
  color:rgba(226,242,255,.86)!important;
}
@media (max-width:1040px){
  .kel-process-restored .kel-usecase.kel-process{
    min-height:auto;
    grid-template-columns:1fr!important;
  }
}
@media (max-width:720px){
  .kel-process-restored{
    padding:18px 16px 64px!important;
  }
  .kel-process-restored .kel-usecase.kel-process{
    padding:24px 18px!important;
    border-radius:28px!important;
  }
  .kel-process-restored .kel-process__intro h3{
    font-size:clamp(34px,10vw,48px)!important;
  }
}

/* ================================================================
   Krankenhausalarm.de · Light Enterprise Hybrid Fix v0.2.3
   Zweck: hellere Optik der früheren Seite zurückführen, KEL-Glas-
   Timeline lesbarer machen und abgeschnittene Überschriften vermeiden.
   ================================================================ */
.kha-relaunch{
  background:linear-gradient(180deg,#f8fafc 0%,#eef5fb 46%,#ffffff 100%)!important;
}
.kha-relaunch .x-hero{
  min-height:auto!important;
  padding:132px 0 78px!important;
  background:linear-gradient(135deg,#f8fafc 0%,#e9f5fb 46%,#dcecf5 100%)!important;
  color:#0b1220!important;
}
.kha-relaunch .x-hero-bg img{
  opacity:.30!important;
  filter:saturate(.86) contrast(1.02) brightness(1.04)!important;
}
.kha-relaunch .x-hero-shade{
  background:
    radial-gradient(circle at 82% 18%,rgba(0,184,217,.18),transparent 30%),
    linear-gradient(90deg,rgba(248,250,252,.98) 0%,rgba(241,247,251,.94) 48%,rgba(229,242,249,.86) 100%)!important;
}
.kha-relaunch .x-hero:after{
  background-image:
    linear-gradient(rgba(15,23,42,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px)!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.52),transparent 80%)!important;
}
.kha-relaunch .x-hero-copy h1{
  color:#0b1220!important;
  text-shadow:none!important;
  max-width:930px!important;
  font-size:clamp(42px,4.05vw,72px)!important;
  line-height:1.03!important;
  letter-spacing:-.055em!important;
}
.kha-relaunch .x-lead,
.kha-relaunch .x-hero-copy p:not(.x-lead){
  color:#334155!important;
}
.kha-relaunch .x-trust-row span{
  background:rgba(255,255,255,.74)!important;
  border-color:#cbd5e1!important;
  color:#0f172a!important;
  box-shadow:0 12px 30px rgba(15,23,42,.07)!important;
}
.kha-relaunch .x-command-panel{
  background:rgba(255,255,255,.74)!important;
  border:1px solid rgba(15,23,42,.10)!important;
  box-shadow:0 28px 80px rgba(15,23,42,.14)!important;
  color:#0b1220!important;
}
.kha-relaunch .x-command-panel h2,
.kha-relaunch .x-kpi-grid strong{
  color:#0b1220!important;
}
.kha-relaunch .x-kpi-grid div,
.kha-relaunch .x-signal-list li{
  background:rgba(248,250,252,.92)!important;
  border-color:#d7e4ee!important;
}
.kha-relaunch .x-kpi-grid span,
.kha-relaunch .x-signal-list span{
  color:#334155!important;
}
.kha-relaunch .x-signal-list em{
  color:#007a3d!important;
}

.kel-process-restored{
  padding:42px 40px 96px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f5f9fc 100%)!important;
}
.kel-process-restored .container{
  max-width:1280px!important;
}
.kel-process-restored .kel-usecase.kel-process{
  min-height:620px!important;
  grid-template-columns:minmax(0,.94fr) minmax(430px,1.06fr)!important;
  gap:clamp(32px,4vw,56px)!important;
  align-items:center!important;
  padding:clamp(34px,4.4vw,58px)!important;
  color:#0b1220!important;
  background:
    radial-gradient(circle at 16% 12%,rgba(0,184,217,.20),transparent 34%),
    radial-gradient(circle at 88% 82%,rgba(14,116,144,.13),transparent 32%),
    linear-gradient(135deg,rgba(237,247,252,.92) 0%,rgba(211,229,238,.86) 48%,rgba(188,214,226,.82) 100%)!important;
  border:1px solid rgba(0,116,140,.35)!important;
  box-shadow:0 30px 90px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.70)!important;
  overflow:hidden!important;
}
.kel-process-restored .kel-usecase.kel-process::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(240,248,252,.92) 0%,rgba(223,237,245,.82) 42%,rgba(202,223,234,.72) 100%),
    url('../img/header-krankenhausalarm.jpg') right center / cover no-repeat!important;
  opacity:.92!important;
  filter:saturate(.88) contrast(1.02) brightness(1.08)!important;
}
.kel-process-restored .kel-usecase.kel-process::after{
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  right:-140px;
  bottom:-170px;
  background:radial-gradient(circle,rgba(0,184,217,.16),transparent 70%)!important;
  pointer-events:none;
}
.kel-process-restored .kel-process__intro{
  min-width:0!important;
  max-width:610px!important;
}
.kel-process-restored .kel-process__intro h3{
  max-width:590px!important;
  color:#0b1220!important;
  font-size:clamp(34px,3.25vw,56px)!important;
  line-height:1.09!important;
  letter-spacing:-.055em!important;
  text-shadow:none!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance;
}
.kel-process-restored .kel-process__intro p{
  max-width:560px!important;
  color:#334155!important;
  text-shadow:none!important;
  font-size:16px!important;
}
.kel-process-restored .kel-process__intro .section-label,
.kel-process-restored .kel-process__eyebrow{
  color:#007f98!important;
  text-shadow:none!important;
}
.kel-process-restored .kel-process__badges span{
  background:rgba(255,255,255,.76)!important;
  border:1px solid rgba(0,116,140,.22)!important;
  color:#112240!important;
  box-shadow:0 12px 28px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.82)!important;
}
.kel-process-restored .kel-process__timeline{
  gap:20px!important;
}
.kel-process-restored .kel-process__timeline::before{
  left:27px!important;
  width:3px!important;
  background:linear-gradient(180deg,rgba(0,184,217,.10),rgba(0,184,217,.78),rgba(0,184,217,.10))!important;
}
.kel-process-restored .kel-process__marker{
  width:58px!important;
  height:58px!important;
  background:linear-gradient(180deg,#0a72c9,#075199)!important;
  border:7px solid rgba(236,249,255,.96)!important;
  color:#ffffff!important;
  box-shadow:0 18px 34px rgba(15,23,42,.20),0 0 0 9px rgba(0,184,217,.14)!important;
}
.kel-process-restored .kel-process__card{
  background:rgba(11,31,52,.90)!important;
  border:1px solid rgba(0,184,217,.24)!important;
  border-radius:24px!important;
  box-shadow:0 22px 54px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
}
.kel-process-restored .kel-process__item:hover .kel-process__card{
  transform:translateY(-3px)!important;
  background:rgba(10,45,72,.92)!important;
  border-color:rgba(0,184,217,.44)!important;
}
.kel-process-restored .kel-process__card h4{
  color:#ffffff!important;
  text-shadow:none!important;
}
.kel-process-restored .kel-process__card p{
  color:rgba(232,244,255,.88)!important;
}
.kha-relaunch .x-section-dark{
  background:linear-gradient(180deg,#10243a 0%,#0b1220 100%)!important;
}
@media (max-width:1180px){
  .kel-process-restored .kel-usecase.kel-process{
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }
  .kel-process-restored .kel-process__intro,
  .kel-process-restored .kel-process__intro h3,
  .kel-process-restored .kel-process__intro p{
    max-width:880px!important;
  }
}
@media (max-width:760px){
  .kha-relaunch .x-hero{padding:118px 0 64px!important;}
  .kha-relaunch .x-hero-copy h1{font-size:clamp(36px,11vw,52px)!important;}
  .kel-process-restored{padding:22px 16px 68px!important;}
  .kel-process-restored .kel-usecase.kel-process{padding:24px 18px!important;border-radius:28px!important;}
  .kel-process-restored .kel-process__intro h3{font-size:clamp(30px,9vw,44px)!important;}
  .kel-process-restored .kel-process__item{grid-template-columns:48px minmax(0,1fr)!important;gap:14px!important;}
  .kel-process-restored .kel-process__marker{width:48px!important;height:48px!important;font-size:20px!important;border-width:5px!important;}
  .kel-process-restored .kel-process__timeline::before{left:23px!important;}
}

/* ================================================================
   KRANKENHAUSALARM.DE · gezielter KEL-Ziffern-Fix v0.2.4
   Zweck: Hero-/Startbereich aus v0.2.3 unverändert lassen und nur
   die nummerierte KEL-Prozesskarte als helles Enterprise-Glasmodul
   mit klaren Ziffern, Timeline und ausreichender Lesbarkeit setzen.
   ================================================================ */

/* Nur Kontrastfehler im bestehenden Hero-Button beheben, Layout bleibt gleich. */
.kha-relaunch .x-hero .btn-glass{
  color:#0b1220!important;
  background:rgba(255,255,255,.76)!important;
  border:1px solid rgba(148,163,184,.55)!important;
  box-shadow:0 14px 34px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.82)!important;
}
.kha-relaunch .x-hero .btn-glass:hover{
  color:#07101f!important;
  background:#ffffff!important;
  border-color:rgba(0,184,217,.42)!important;
}

/* KEL-Ziffernsektion: helles Umfeld, zentrale Premium-Karte. */
.kel-process-restored{
  padding:54px 40px 106px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f6fafc 54%,#ffffff 100%)!important;
  overflow:visible!important;
}
.kel-process-restored .container{
  width:min(1400px,calc(100% - 64px))!important;
  max-width:none!important;
  margin:0 auto!important;
}
.kel-process-restored .kel-usecase.kel-process{
  position:relative!important;
  isolation:isolate!important;
  margin:0 auto!important;
  min-height:620px!important;
  display:grid!important;
  grid-template-columns:minmax(360px,.92fr) minmax(500px,1.08fr)!important;
  gap:clamp(34px,4.4vw,72px)!important;
  align-items:center!important;
  padding:clamp(38px,4.6vw,72px)!important;
  border-radius:42px!important;
  overflow:hidden!important;
  color:#0b1220!important;
  border:1px solid rgba(0,116,140,.34)!important;
  background:
    radial-gradient(circle at 15% 16%,rgba(0,184,217,.22),transparent 35%),
    radial-gradient(circle at 76% 84%,rgba(14,165,233,.16),transparent 32%),
    linear-gradient(135deg,rgba(245,250,253,.94) 0%,rgba(224,238,246,.88) 44%,rgba(190,216,229,.78) 100%)!important;
  box-shadow:0 36px 96px rgba(15,23,42,.15), inset 0 1px 0 rgba(255,255,255,.78)!important;
}
.kel-process-restored .kel-usecase.kel-process::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(248,250,252,.93) 0%,rgba(231,242,248,.84) 42%,rgba(203,225,236,.66) 100%),
    url('../img/header-krankenhausalarm.jpg') right center / cover no-repeat!important;
  opacity:.96!important;
  filter:saturate(.88) contrast(1.03) brightness(1.06)!important;
}
.kel-process-restored .kel-usecase.kel-process::after{
  content:""!important;
  position:absolute!important;
  inset:auto -120px -170px auto!important;
  width:420px!important;
  height:420px!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:radial-gradient(circle,rgba(0,184,217,.20),rgba(0,184,217,.07) 38%,transparent 72%)!important;
}

/* Linke Textspalte: lesbar, nicht abgeschnitten, nicht übermassiv. */
.kel-process-restored .kel-process__intro{
  min-width:0!important;
  max-width:620px!important;
}
.kel-process-restored .kel-process__intro .section-label,
.kel-process-restored .kel-process__eyebrow{
  color:#008ca6!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-shadow:none!important;
}
.kel-process-restored .kel-process__intro h3{
  margin:0 0 20px!important;
  max-width:620px!important;
  color:#0b1220!important;
  font-size:clamp(38px,3.2vw,58px)!important;
  line-height:1.07!important;
  letter-spacing:-.055em!important;
  text-shadow:none!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance!important;
}
.kel-process-restored .kel-process__intro p{
  max-width:570px!important;
  margin:0 0 24px!important;
  color:#334155!important;
  font-size:17px!important;
  line-height:1.74!important;
  text-shadow:none!important;
}
.kel-process-restored .kel-process__badges{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}
.kel-process-restored .kel-process__badges span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:36px!important;
  padding:9px 15px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.78)!important;
  border:1px solid rgba(0,116,140,.24)!important;
  color:#112240!important;
  font-weight:850!important;
  box-shadow:0 12px 28px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.86)!important;
}

/* Rechte Timeline: Ziffern mit Glas-/Tiefeffekt, Karten stabil lesbar. */
.kel-process-restored .kel-process__timeline{
  position:relative!important;
  display:grid!important;
  gap:22px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
.kel-process-restored .kel-process__timeline::before{
  content:""!important;
  position:absolute!important;
  top:34px!important;
  bottom:34px!important;
  left:31px!important;
  width:3px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(0,184,217,.12),rgba(0,184,217,.80) 45%,rgba(0,184,217,.12))!important;
  box-shadow:0 0 26px rgba(0,184,217,.28)!important;
}
.kel-process-restored .kel-process__item{
  position:relative!important;
  display:grid!important;
  grid-template-columns:66px minmax(0,1fr)!important;
  gap:20px!important;
  align-items:center!important;
}
.kel-process-restored .kel-process__marker{
  position:relative!important;
  z-index:2!important;
  width:66px!important;
  height:66px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  color:#ffffff!important;
  font-size:28px!important;
  font-weight:950!important;
  line-height:1!important;
  background:linear-gradient(180deg,#0b7fd2 0%,#075198 100%)!important;
  border:8px solid rgba(236,249,255,.96)!important;
  box-shadow:0 18px 34px rgba(15,23,42,.22),0 0 0 10px rgba(0,184,217,.14), inset 0 2px 0 rgba(255,255,255,.28)!important;
}
.kel-process-restored .kel-process__card{
  min-width:0!important;
  padding:28px 30px!important;
  border-radius:26px!important;
  color:#ffffff!important;
  background:linear-gradient(180deg,rgba(11,31,52,.91),rgba(9,27,46,.86))!important;
  border:1px solid rgba(125,211,252,.24)!important;
  box-shadow:0 22px 54px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.11)!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
}
.kel-process-restored .kel-process__item:nth-child(2) .kel-process__card,
.kel-process-restored .kel-process__item:nth-child(3) .kel-process__card{
  border-color:rgba(0,184,217,.36)!important;
  background:linear-gradient(180deg,rgba(8,46,74,.94),rgba(9,35,60,.89))!important;
}
.kel-process-restored .kel-process__item:hover .kel-process__card{
  transform:translateY(-3px)!important;
  border-color:rgba(0,184,217,.52)!important;
  box-shadow:0 30px 70px rgba(15,23,42,.30), inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.kel-process-restored .kel-process__card h4{
  margin:8px 0 10px!important;
  color:#ffffff!important;
  font-size:clamp(20px,1.42vw,26px)!important;
  line-height:1.18!important;
  letter-spacing:-.035em!important;
  text-shadow:none!important;
}
.kel-process-restored .kel-process__card p{
  margin:0!important;
  color:rgba(232,244,255,.88)!important;
  font-size:16px!important;
  line-height:1.68!important;
}

@media (max-width:1180px){
  .kel-process-restored .kel-usecase.kel-process{
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }
  .kel-process-restored .kel-process__intro,
  .kel-process-restored .kel-process__intro h3,
  .kel-process-restored .kel-process__intro p{
    max-width:900px!important;
  }
}
@media (max-width:760px){
  .kel-process-restored{
    padding:28px 16px 72px!important;
  }
  .kel-process-restored .container{
    width:100%!important;
  }
  .kel-process-restored .kel-usecase.kel-process{
    padding:26px 18px!important;
    border-radius:30px!important;
  }
  .kel-process-restored .kel-process__intro h3{
    font-size:clamp(32px,9.5vw,44px)!important;
  }
  .kel-process-restored .kel-process__item{
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:14px!important;
  }
  .kel-process-restored .kel-process__marker{
    width:50px!important;
    height:50px!important;
    border-width:5px!important;
    font-size:20px!important;
  }
  .kel-process-restored .kel-process__timeline::before{
    left:24px!important;
  }
  .kel-process-restored .kel-process__card{
    padding:20px!important;
    border-radius:22px!important;
  }
}


/* ================================================================
   KRANKENHAUSALARM.DE · KEL-Ziffernblock Dark-Glass Fix v0.2.6
   Zweck: Nur der nummerierte KEL-4-Schritte-Bereich wird wieder
   sichtbar dunkel / glassmorphic dargestellt. Der helle Hero bleibt
   unverändert.
   ================================================================ */
#kel-aktivierung.kel-process-restored{
  padding:54px 40px 112px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 50%,#ffffff 100%)!important;
  overflow:visible!important;
}
#kel-aktivierung.kel-process-restored .container{
  width:min(1380px,calc(100% - 64px))!important;
  max-width:none!important;
  margin:0 auto!important;
}
#kel-aktivierung.kel-process-restored .kel-usecase.kel-process{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-columns:minmax(360px,.9fr) minmax(510px,1.1fr)!important;
  gap:clamp(34px,4vw,70px)!important;
  align-items:center!important;
  min-height:670px!important;
  margin:0 auto!important;
  padding:clamp(42px,4.8vw,76px)!important;
  border-radius:42px!important;
  overflow:hidden!important;
  color:#ffffff!important;
  background:
    radial-gradient(circle at 17% 18%,rgba(0,184,217,.23),transparent 35%),
    radial-gradient(circle at 82% 82%,rgba(0,144,171,.24),transparent 36%),
    linear-gradient(135deg,#061323 0%,#071c31 48%,#081221 100%)!important;
  border:1px solid rgba(0,184,217,.40)!important;
  box-shadow:0 38px 110px rgba(15,23,42,.26), inset 0 1px 0 rgba(255,255,255,.12)!important;
}
#kel-aktivierung.kel-process-restored .kel-usecase.kel-process::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(4,13,26,.92) 0%,rgba(5,18,32,.84) 42%,rgba(4,13,26,.70) 100%),
    url('../img/header-krankenhausalarm.jpg') right center / cover no-repeat!important;
  opacity:1!important;
  filter:saturate(.82) contrast(1.12) brightness(.62)!important;
}
#kel-aktivierung.kel-process-restored .kel-usecase.kel-process::after{
  content:""!important;
  position:absolute!important;
  inset:auto -130px -180px auto!important;
  width:460px!important;
  height:460px!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:radial-gradient(circle,rgba(0,184,217,.30),rgba(0,184,217,.10) 38%,transparent 72%)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro{
  max-width:610px!important;
  min-width:0!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro .section-label,
#kel-aktivierung.kel-process-restored .kel-process__eyebrow{
  color:#7ddcff!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-shadow:0 10px 26px rgba(0,0,0,.40)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro h3{
  margin:0 0 20px!important;
  max-width:610px!important;
  color:#ffffff!important;
  font-size:clamp(36px,3.35vw,60px)!important;
  line-height:1.08!important;
  letter-spacing:-.055em!important;
  text-shadow:0 18px 42px rgba(0,0,0,.46)!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro p{
  max-width:560px!important;
  margin:0 0 24px!important;
  color:rgba(235,247,255,.88)!important;
  font-size:17px!important;
  line-height:1.74!important;
  text-shadow:0 12px 32px rgba(0,0,0,.38)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__badges{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}
#kel-aktivierung.kel-process-restored .kel-process__badges span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:36px!important;
  padding:9px 15px!important;
  border-radius:999px!important;
  background:rgba(10,31,52,.78)!important;
  border:1px solid rgba(125,211,252,.26)!important;
  color:rgba(248,250,252,.94)!important;
  font-weight:850!important;
  box-shadow:0 14px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__timeline{
  position:relative!important;
  display:grid!important;
  gap:22px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
#kel-aktivierung.kel-process-restored .kel-process__timeline::before{
  content:""!important;
  position:absolute!important;
  top:34px!important;
  bottom:34px!important;
  left:31px!important;
  width:3px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(125,211,252,.14),rgba(0,216,230,.82) 45%,rgba(125,211,252,.14))!important;
  box-shadow:0 0 34px rgba(0,216,230,.34)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__item{
  position:relative!important;
  display:grid!important;
  grid-template-columns:66px minmax(0,1fr)!important;
  gap:20px!important;
  align-items:center!important;
}
#kel-aktivierung.kel-process-restored .kel-process__marker{
  position:relative!important;
  z-index:2!important;
  width:66px!important;
  height:66px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  color:#ffffff!important;
  font-size:28px!important;
  font-weight:950!important;
  line-height:1!important;
  background:linear-gradient(180deg,#0f7bd7 0%,#07529e 100%)!important;
  border:8px solid rgba(224,245,255,.96)!important;
  box-shadow:0 22px 42px rgba(0,0,0,.30),0 0 0 11px rgba(14,165,233,.16), inset 0 2px 0 rgba(255,255,255,.30)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__card{
  min-width:0!important;
  padding:28px 30px!important;
  border-radius:26px!important;
  color:#ffffff!important;
  background:linear-gradient(180deg,rgba(13,35,58,.78),rgba(7,20,36,.72))!important;
  border:1px solid rgba(125,211,252,.24)!important;
  box-shadow:0 24px 58px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(18px) saturate(1.12)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__item:nth-child(2) .kel-process__card,
#kel-aktivierung.kel-process-restored .kel-process__item:nth-child(3) .kel-process__card{
  border-color:rgba(0,216,230,.38)!important;
  background:linear-gradient(180deg,rgba(8,56,86,.82),rgba(9,34,58,.76))!important;
}
#kel-aktivierung.kel-process-restored .kel-process__item:hover .kel-process__card{
  transform:translateY(-3px)!important;
  border-color:rgba(0,216,230,.56)!important;
  box-shadow:0 32px 76px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.15)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__card h4{
  margin:8px 0 10px!important;
  color:#ffffff!important;
  font-size:clamp(20px,1.42vw,26px)!important;
  line-height:1.18!important;
  letter-spacing:-.035em!important;
  text-shadow:0 10px 28px rgba(0,0,0,.34)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__card p{
  margin:0!important;
  color:rgba(232,244,255,.88)!important;
  font-size:16px!important;
  line-height:1.68!important;
}
@media (max-width:1180px){
  #kel-aktivierung.kel-process-restored .kel-usecase.kel-process{
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__intro,
  #kel-aktivierung.kel-process-restored .kel-process__intro h3,
  #kel-aktivierung.kel-process-restored .kel-process__intro p{
    max-width:900px!important;
  }
}
@media (max-width:760px){
  #kel-aktivierung.kel-process-restored{
    padding:28px 16px 72px!important;
  }
  #kel-aktivierung.kel-process-restored .container{
    width:100%!important;
  }
  #kel-aktivierung.kel-process-restored .kel-usecase.kel-process{
    padding:26px 18px!important;
    border-radius:30px!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__intro h3{
    font-size:clamp(32px,9.5vw,44px)!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__item{
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:14px!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__marker{
    width:50px!important;
    height:50px!important;
    border-width:5px!important;
    font-size:20px!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__timeline::before{
    left:24px!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__card{
    padding:20px!important;
    border-radius:22px!important;
  }
}

/* v027 - section swap correction: hero dark, KEL timeline light */
.kha-relaunch .x-hero{
  min-height:auto!important;
  padding:132px 0 82px!important;
  background:linear-gradient(135deg,#06101e 0%,#08182b 48%,#0d3046 100%)!important;
  color:#ffffff!important;
}
.kha-relaunch .x-hero-bg img{
  opacity:.34!important;
  filter:saturate(.92) contrast(1.06) brightness(.70)!important;
}
.kha-relaunch .x-hero-shade{
  background:
    radial-gradient(circle at 80% 18%,rgba(0,184,217,.20),transparent 32%),
    linear-gradient(90deg,rgba(6,16,30,.96) 0%,rgba(6,16,30,.88) 46%,rgba(6,16,30,.66) 100%)!important;
}
.kha-relaunch .x-hero:after{
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),transparent 84%)!important;
}
.kha-relaunch .x-kicker{color:#42d8f5!important;}
.kha-relaunch .x-hero-copy h1{
  color:#ffffff!important;
  text-shadow:0 20px 58px rgba(0,0,0,.38)!important;
  max-width:930px!important;
  font-size:clamp(42px,4.05vw,72px)!important;
  line-height:1.03!important;
  letter-spacing:-.055em!important;
}
.kha-relaunch .x-lead,
.kha-relaunch .x-hero-copy p:not(.x-lead){
  color:rgba(235,244,252,.90)!important;
}
.kha-relaunch .x-trust-row span{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.16)!important;
  color:rgba(255,255,255,.90)!important;
  box-shadow:none!important;
}
.kha-relaunch .x-command-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.07))!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 32px 80px rgba(2,8,23,.28)!important;
  color:#ffffff!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
}
.kha-relaunch .x-command-panel h2,
.kha-relaunch .x-kpi-grid strong{color:#ffffff!important;}
.kha-relaunch .x-kpi-grid div,
.kha-relaunch .x-signal-list li{
  background:rgba(2,8,23,.28)!important;
  border-color:rgba(255,255,255,.12)!important;
}
.kha-relaunch .x-kpi-grid span,
.kha-relaunch .x-signal-list span{color:rgba(235,244,252,.86)!important;}
.kha-relaunch .x-live,
.kha-relaunch .x-time{color:#dffbff!important;background:rgba(0,184,217,.12)!important;border-color:rgba(38,208,240,.24)!important;}
.kha-relaunch .x-progress{background:rgba(255,255,255,.14)!important;}
.kha-relaunch .x-signal-list em{color:#9df5bf!important;}
.kha-relaunch .x-hero .btn-glass{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.18)!important;
  color:#ffffff!important;
  box-shadow:none!important;
}
.kha-relaunch .x-hero .btn-glass:hover{
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.28)!important;
}

#kel-aktivierung.kel-process-restored{
  padding:54px 40px 112px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f5f9fc 52%,#ffffff 100%)!important;
  overflow:visible!important;
}
#kel-aktivierung.kel-process-restored .container{
  width:min(1380px,calc(100% - 64px))!important;
  max-width:none!important;
  margin:0 auto!important;
}
#kel-aktivierung.kel-process-restored .kel-usecase.kel-process{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-columns:minmax(360px,.9fr) minmax(510px,1.1fr)!important;
  gap:clamp(34px,4vw,70px)!important;
  align-items:center!important;
  min-height:670px!important;
  margin:0 auto!important;
  padding:clamp(42px,4.8vw,76px)!important;
  border-radius:42px!important;
  overflow:hidden!important;
  color:#0b1220!important;
  background:
    radial-gradient(circle at 17% 18%,rgba(0,184,217,.10),transparent 35%),
    radial-gradient(circle at 82% 82%,rgba(0,144,171,.12),transparent 36%),
    linear-gradient(135deg,#f7fbfe 0%,#edf4f9 46%,#dfeaf2 100%)!important;
  border:1px solid rgba(14,116,144,.28)!important;
  box-shadow:0 34px 90px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.8)!important;
}
#kel-aktivierung.kel-process-restored .kel-usecase.kel-process::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(244,249,252,.88) 0%,rgba(239,246,250,.78) 40%,rgba(235,244,250,.55) 100%),
    url('../img/header-krankenhausalarm.jpg') right center / cover no-repeat!important;
  opacity:1!important;
  filter:saturate(.86) contrast(1.02) brightness(1.03)!important;
}
#kel-aktivierung.kel-process-restored .kel-usecase.kel-process::after{
  content:""!important;
  position:absolute!important;
  inset:auto -130px -180px auto!important;
  width:460px!important;
  height:460px!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:radial-gradient(circle,rgba(0,184,217,.16),rgba(0,184,217,.06) 38%,transparent 72%)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro{
  max-width:610px!important;
  min-width:0!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro .section-label,
#kel-aktivierung.kel-process-restored .kel-process__eyebrow{
  color:#00a5c9!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-shadow:none!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro h3{
  margin:0 0 20px!important;
  max-width:610px!important;
  color:#ffffff!important;
  font-size:clamp(36px,3.35vw,60px)!important;
  line-height:1.08!important;
  letter-spacing:-.055em!important;
  text-shadow:0 16px 38px rgba(0,0,0,.25)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro p{
  max-width:560px!important;
  margin:0 0 24px!important;
  color:#e9f4fb!important;
  font-size:17px!important;
  line-height:1.74!important;
  text-shadow:0 12px 28px rgba(0,0,0,.18)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__badges{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}
#kel-aktivierung.kel-process-restored .kel-process__badges span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:36px!important;
  padding:9px 15px!important;
  border-radius:999px!important;
  background:rgba(17,34,64,.78)!important;
  border:1px solid rgba(125,211,252,.28)!important;
  color:rgba(248,250,252,.96)!important;
  font-weight:850!important;
  box-shadow:0 14px 30px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.10)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__timeline{
  position:relative!important;
  display:grid!important;
  gap:22px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
#kel-aktivierung.kel-process-restored .kel-process__timeline::before{
  content:""!important;
  position:absolute!important;
  top:34px!important;
  bottom:34px!important;
  left:31px!important;
  width:3px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(125,211,252,.14),rgba(0,216,230,.82) 45%,rgba(125,211,252,.14))!important;
  box-shadow:0 0 34px rgba(0,216,230,.20)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__item{
  position:relative!important;
  display:grid!important;
  grid-template-columns:66px minmax(0,1fr)!important;
  gap:20px!important;
  align-items:center!important;
}
#kel-aktivierung.kel-process-restored .kel-process__marker{
  position:relative!important;
  z-index:2!important;
  width:66px!important;
  height:66px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  color:#ffffff!important;
  font-size:28px!important;
  font-weight:950!important;
  line-height:1!important;
  background:linear-gradient(180deg,#3890e8 0%,#1764b8 100%)!important;
  border:8px solid rgba(235,248,255,.96)!important;
  box-shadow:0 22px 42px rgba(15,23,42,.16),0 0 0 11px rgba(14,165,233,.12), inset 0 2px 0 rgba(255,255,255,.32)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__card{
  min-width:0!important;
  padding:28px 30px!important;
  border-radius:26px!important;
  color:#ffffff!important;
  background:linear-gradient(180deg,rgba(11,34,64,.92),rgba(15,37,67,.88))!important;
  border:1px solid rgba(82,191,245,.28)!important;
  box-shadow:0 24px 58px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(12px) saturate(1.05)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.05)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__item:nth-child(2) .kel-process__card,
#kel-aktivierung.kel-process-restored .kel-process__item:nth-child(3) .kel-process__card{
  border-color:rgba(0,216,230,.34)!important;
  background:linear-gradient(180deg,rgba(9,77,118,.90),rgba(12,58,93,.86))!important;
}
#kel-aktivierung.kel-process-restored .kel-process__item:hover .kel-process__card{
  transform:translateY(-3px)!important;
  border-color:rgba(0,216,230,.52)!important;
  box-shadow:0 32px 76px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.12)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__card h4{
  margin:8px 0 10px!important;
  color:#ffffff!important;
  font-size:clamp(20px,1.42vw,26px)!important;
  line-height:1.18!important;
  letter-spacing:-.035em!important;
  text-shadow:none!important;
}
#kel-aktivierung.kel-process-restored .kel-process__card p{
  margin:0!important;
  color:rgba(232,244,255,.92)!important;
  font-size:16px!important;
  line-height:1.68!important;
}
@media (max-width:1180px){
  #kel-aktivierung.kel-process-restored .kel-usecase.kel-process{
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__intro,
  #kel-aktivierung.kel-process-restored .kel-process__intro h3,
  #kel-aktivierung.kel-process-restored .kel-process__intro p{
    max-width:900px!important;
  }
}
@media (max-width:760px){
  #kel-aktivierung.kel-process-restored{
    padding:28px 16px 72px!important;
  }
  #kel-aktivierung.kel-process-restored .container{
    width:100%!important;
  }
  #kel-aktivierung.kel-process-restored .kel-usecase.kel-process{
    padding:26px 18px!important;
    border-radius:30px!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__intro h3{
    font-size:clamp(32px,9.5vw,44px)!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__item{
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:14px!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__marker{
    width:50px!important;
    height:50px!important;
    border-width:5px!important;
    font-size:20px!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__timeline::before{
    left:24px!important;
  }
  #kel-aktivierung.kel-process-restored .kel-process__card{
    padding:20px!important;
    border-radius:22px!important;
  }
}


/* v029 - Krankenhausbilder sichtbar wieder integrieren */
.clinic-image-return-section{
  padding:96px 0;
  background:
    radial-gradient(circle at 10% 10%,rgba(0,184,217,.08),transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#f6f9fc 100%);
  color:#0b1220;
  overflow:hidden;
}
.clinic-image-return-grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(520px,1.22fr);
  gap:clamp(38px,5vw,78px);
  align-items:center;
}
.clinic-image-return-copy h2{
  margin:0 0 20px;
  color:#0b1220;
  font-size:clamp(34px,3.7vw,62px);
  line-height:1.02;
  letter-spacing:-.055em;
}
.clinic-image-return-copy p{
  margin:0;
  color:#334155;
  font-size:18px;
  line-height:1.76;
  max-width:720px;
}
.clinic-image-return-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
.clinic-image-return-points span{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:9px 14px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid #cbd5e1;
  color:#0f172a;
  font-weight:850;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.clinic-image-return-visuals{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}
.clinic-image-card{
  position:relative;
  min-height:360px;
  margin:0;
  border-radius:34px;
  overflow:hidden;
  background:#0b1220;
  border:1px solid rgba(14,116,144,.24);
  box-shadow:0 30px 86px rgba(15,23,42,.18);
}
.clinic-image-card--large{
  min-height:470px;
}
.clinic-image-card picture,
.clinic-image-card img{
  display:block;
  width:100%;
  height:100%;
}
.clinic-image-card img{
  object-fit:cover;
  filter:saturate(.94) contrast(1.04);
  transform:scale(1.01);
}
.clinic-image-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,12,24,.04) 0%,rgba(5,12,24,.18) 48%,rgba(5,12,24,.76) 100%);
  pointer-events:none;
}
.clinic-image-card figcaption{
  position:absolute;
  left:22px;
  right:22px;
  bottom:20px;
  z-index:1;
  padding:18px 20px;
  border-radius:22px;
  background:rgba(7,16,31,.74);
  border:1px solid rgba(255,255,255,.16);
  color:#ffffff;
  backdrop-filter:blur(14px) saturate(1.06);
  -webkit-backdrop-filter:blur(14px) saturate(1.06);
}
.clinic-image-card figcaption strong{
  display:block;
  margin-bottom:5px;
  color:#ffffff;
  font-size:18px;
}
.clinic-image-card figcaption span{
  display:block;
  color:rgba(235,244,252,.82);
  font-size:14px;
  line-height:1.5;
}
@media (max-width:1080px){
  .clinic-image-return-grid{grid-template-columns:1fr;}
  .clinic-image-return-visuals{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  .clinic-image-return-section{padding:72px 0;}
  .clinic-image-return-visuals{grid-template-columns:1fr;}
  .clinic-image-card,.clinic-image-card--large{min-height:310px;border-radius:26px;}
  .clinic-image-card figcaption{left:14px;right:14px;bottom:14px;border-radius:18px;}
}

/* v031 - readability fixes for KEL and clinic image section */
#kel-aktivierung.kel-process-restored .kel-usecase.kel-process::before{
  background:
    linear-gradient(90deg,rgba(6,16,30,.78) 0%,rgba(9,22,39,.62) 42%,rgba(236,244,250,.22) 100%),
    url('../img/header-krankenhausalarm.jpg') right center / cover no-repeat!important;
  filter:saturate(.88) contrast(1.03) brightness(.94)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro{
  max-width:620px!important;
  min-width:0!important;
  padding:34px 34px 30px!important;
  border-radius:30px!important;
  background:linear-gradient(180deg,rgba(8,20,35,.74),rgba(10,24,42,.58))!important;
  border:1px solid rgba(125,211,252,.18)!important;
  box-shadow:0 26px 70px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(12px) saturate(1.04)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.04)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro .section-label,
#kel-aktivierung.kel-process-restored .kel-process__eyebrow{
  color:#8ee9ff!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro h3{
  color:#ffffff!important;
  text-shadow:0 18px 36px rgba(0,0,0,.22)!important;
}
#kel-aktivierung.kel-process-restored .kel-process__intro p{
  color:rgba(241,248,252,.94)!important;
  text-shadow:none!important;
}
#kel-aktivierung.kel-process-restored .kel-process__badges span{
  background:rgba(17,34,64,.88)!important;
  border-color:rgba(125,211,252,.32)!important;
  color:#ffffff!important;
}
#kel-aktivierung.kel-process-restored .kel-process__card p{
  color:rgba(241,248,252,.94)!important;
}

.clinic-image-return-section{
  background:
    radial-gradient(circle at 10% 10%,rgba(0,184,217,.06),transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#f7fafc 100%)!important;
}
.clinic-image-return-copy h2{
  max-width:560px;
  font-size:clamp(34px,3.35vw,58px);
  line-height:1.06;
  text-wrap:balance;
}
.clinic-image-return-copy p{
  color:#24364b;
  max-width:620px;
}
.clinic-image-return-points span{
  border-color:#b8c8d8;
  color:#122033;
}
.clinic-image-card::after{
  background:linear-gradient(180deg,rgba(5,12,24,.04) 0%,rgba(5,12,24,.14) 44%,rgba(5,12,24,.82) 100%);
}
.clinic-image-card figcaption{
  background:rgba(7,16,31,.82);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.clinic-image-card figcaption span{
  color:rgba(240,247,252,.90);
}
@media (max-width:760px){
  #kel-aktivierung.kel-process-restored .kel-process__intro{
    padding:24px 20px 22px!important;
    border-radius:24px!important;
  }
  .clinic-image-return-copy h2{
    max-width:none;
    font-size:clamp(30px,9vw,46px);
  }
}

/* ================================================================
   Krankenhausalarm.de · Kontaktseite Professional Redesign v032
   Stand: 2026-06-26
   Zweck: Eigenständiges Kontaktseiten-Layout mit klarer Hierarchie,
          besseren Formularzuständen und professioneller Klinik-Anmutung.
   ================================================================ */
.contact-page-v2 {
  --contact-navy: #0b1220;
  --contact-navy-2: #112240;
  --contact-cyan: #00b8d9;
  --contact-cyan-dark: #0090ab;
  --contact-red: #b01828;
  --contact-bg: #f8fafc;
  --contact-text: #0b1220;
  --contact-muted: #475569;
  --contact-line: #dbe7f1;
  background: linear-gradient(180deg, #f8fafc 0%, #eef4fa 46%, #f8fafc 100%);
  color: var(--contact-text);
  overflow: hidden;
}

.contact-shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.contact-hero-section {
  position: relative;
  isolation: isolate;
  padding: clamp(76px, 8vw, 116px) 0 clamp(54px, 6vw, 82px);
  background:
    radial-gradient(circle at 78% 14%, rgba(0, 184, 217, .26), transparent 34%),
    linear-gradient(135deg, #07101f 0%, #0b1220 48%, #112240 100%);
  color: #fff;
}

.contact-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.28));
}

.contact-hero-section::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -190px;
  bottom: -230px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0, 184, 217, .18), transparent 68%);
  filter: blur(8px);
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.contact-hero-copy h1 {
  max-width: 780px;
  margin: 12px 0 22px;
  color: #fff;
  font-size: clamp(42px, 5.6vw, 76px);
  line-height: .98;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.contact-lead {
  max-width: 790px;
  margin: 0;
  color: rgba(226, 232, 240, .88);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.72;
}

.contact-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.contact-trust-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.075);
  color: rgba(248,250,252,.9);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.contact-summary-card {
  position: relative;
  padding: 24px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  box-shadow: 0 36px 96px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.contact-summary-header {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.contact-summary-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(0,184,217,.16);
  border: 1px solid rgba(38,208,240,.28);
  color: #bff7ff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .06em;
}

.contact-summary-header strong,
.contact-summary-list strong {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}

.contact-summary-header small,
.contact-summary-list small {
  display: block;
  color: rgba(226,232,240,.7);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 3px;
}

.contact-summary-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-summary-list li {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 15px;
  border-radius: 18px;
  background: rgba(2, 8, 23, .28);
  border: 1px solid rgba(255,255,255,.10);
}

.contact-summary-list li > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: rgba(0,184,217,.14);
  color: #8ff0ff;
  font-size: 12px;
  font-weight: 950;
}

.contact-main-section {
  padding: clamp(56px, 7vw, 92px) 0 clamp(72px, 8vw, 112px);
}

.contact-main-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 42px);
  align-items: start;
}

.contact-info-stack {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 104px;
}

.contact-info-card,
.contact-form-card {
  border: 1px solid var(--contact-line);
  background: rgba(255,255,255,.92);
  box-shadow: 0 24px 70px rgba(11,18,32,.10);
}

.contact-info-card {
  padding: 22px;
  border-radius: 24px;
}

.contact-info-card--primary {
  color: #fff;
  border-color: rgba(0,184,217,.20);
  background:
    radial-gradient(circle at 88% 0%, rgba(0,184,217,.28), transparent 36%),
    linear-gradient(135deg, #0b1220, #112240);
}

.contact-info-card--notice {
  border-color: rgba(176, 24, 40, .20);
  background: linear-gradient(180deg, #fff, #fff7f8);
}

.contact-info-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--contact-cyan-dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-info-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--contact-cyan);
  box-shadow: 0 0 18px rgba(0,184,217,.52);
}

.contact-info-card--primary .contact-info-kicker {
  color: #8ff0ff;
}

.contact-info-card h2 {
  margin: 0 0 18px;
  color: inherit;
  font-size: 24px;
  letter-spacing: -.035em;
}

.contact-info-card p {
  margin: 0;
  color: var(--contact-muted);
  font-size: 14.5px;
  line-height: 1.72;
}

.contact-info-card--primary p,
.contact-info-card--primary a,
.contact-info-card--primary dd,
.contact-info-card--primary dt {
  color: rgba(255,255,255,.9);
}

.contact-method-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.contact-method-list div {
  padding: 14px;
  border-radius: 17px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.contact-method-list dt {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
}

.contact-method-list dd {
  margin: 0;
  font-size: 15px;
  font-weight: 850;
}

.contact-method-list a,
.contact-info-card a {
  color: var(--contact-cyan-dark);
  font-weight: 850;
  text-decoration: none;
}

.contact-method-list a:hover,
.contact-info-card a:hover,
.contact-form-card a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-provider-lines {
  display: grid;
  gap: 2px;
}

.contact-provider-lines strong,
.contact-provider-lines span {
  display: block;
}

.contact-small-note {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid var(--contact-line);
  font-size: 13.5px !important;
}

.contact-form-card {
  position: relative;
  padding: clamp(28px, 4vw, 46px);
  border-radius: 32px;
  overflow: hidden;
}

.contact-form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--contact-cyan), #26d0f0, var(--contact-cyan-dark));
}

.contact-form-card h2 {
  margin: 10px 0 10px;
  color: var(--contact-text);
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.04;
  letter-spacing: -.055em;
}

.contact-form-intro {
  max-width: 720px;
  margin: 0 0 22px;
  color: var(--contact-muted);
  font-size: 16px;
  line-height: 1.75;
}

.contact-form-v2 {
  display: grid;
  gap: 18px;
}

.contact-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-form-v2 label:not(.privacy-check) {
  display: grid;
  gap: 7px;
  margin: 0;
  color: #1f2937;
  font-size: 13px;
  font-weight: 850;
}

.contact-form-v2 label > span:first-child {
  display: inline-flex;
  color: #1f2937;
}

.contact-form-v2 input,
.contact-form-v2 select,
.contact-form-v2 textarea {
  width: 100%;
  min-height: 50px;
  border: 1.5px solid #cddde9;
  border-radius: 14px;
  padding: 13px 15px;
  background: #fff;
  color: var(--contact-text);
  font: inherit;
  font-size: 15px;
  outline: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.contact-form-v2 select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #475569 50%),
    linear-gradient(135deg, #475569 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.contact-form-v2 textarea {
  min-height: 178px;
  resize: vertical;
  line-height: 1.65;
}

.contact-form-v2 input::placeholder,
.contact-form-v2 textarea::placeholder {
  color: #7b8da3;
}

.contact-form-v2 input:focus,
.contact-form-v2 select:focus,
.contact-form-v2 textarea:focus {
  border-color: var(--contact-cyan-dark);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(0,184,217,.16), 0 12px 30px rgba(15,23,42,.06);
}

.privacy-check-v2 {
  margin: 2px 0 0 !important;
  padding: 15px 16px;
  border: 1px solid #dbe7f1;
  border-radius: 18px;
  background: #f8fafc;
  color: #334155;
  font-size: 13.5px;
  line-height: 1.58;
}

.privacy-check-v2 input {
  width: 18px !important;
  height: 18px;
  accent-color: var(--contact-cyan-dark);
}

.contact-submit-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 4px;
}

.contact-submit-row .contact-submit {
  min-height: 50px;
  padding-inline: 24px;
  white-space: nowrap;
}

.contact-submit-row p {
  margin: 0;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.55;
}

.contact-form-v2.is-sending .contact-submit {
  opacity: .72;
  cursor: wait;
}

.contact-page-v2 .form-status {
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 800;
}

.contact-page-v2 .form-status.ok {
  color: #0f6d3b;
  border: 1px solid #b4e9cc;
  background: #e9f8f0;
}

.contact-page-v2 .form-status.err {
  color: var(--contact-red);
  border: 1px solid #ffd0d3;
  background: #fff0f0;
}

@media (max-width: 1100px) {
  .contact-hero-grid,
  .contact-main-grid {
    grid-template-columns: 1fr;
  }

  .contact-info-stack {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .contact-shell {
    width: min(100% - 32px, 1180px);
  }

  .contact-hero-section {
    padding-top: 54px;
  }

  .contact-hero-copy h1 {
    font-size: clamp(34px, 10.2vw, 48px);
    letter-spacing: -.045em;
  }

  .contact-summary-card,
  .contact-form-card {
    border-radius: 24px;
  }

  .contact-info-stack,
  .contact-field-grid {
    grid-template-columns: 1fr;
  }

  .contact-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-submit-row .contact-submit {
    width: 100%;
  }
}

/* ================================================================
   KRANKENHAUSALARM.DE · Kundenlogin Professional v033
   Scope: #kundenlogin / Modal auf index.php#kundenlogin
   ================================================================ */
.customer-login-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.customer-login-modal.customer-login-modal--professional {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px, 3vw, 42px) !important;
}

.customer-login-modal.customer-login-modal--professional.is-open {
  display: flex !important;
}

.customer-login-modal--professional .customer-login-modal__overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 16% 8%, rgba(0, 184, 217, .28), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(176, 24, 40, .18), transparent 30%),
    rgba(3, 7, 18, .78) !important;
  backdrop-filter: blur(16px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
}

.customer-login-modal--professional .customer-login-modal__dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(100%, 1180px) !important;
  max-height: min(92vh, 860px) !important;
  min-height: auto !important;
  overflow: auto !important;
  padding: 0 !important;
  border-radius: clamp(24px, 3vw, 38px) !important;
  background: #ffffff !important;
  color: #0b1220 !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: 0 42px 120px rgba(0, 0, 0, .46), 0 0 0 1px rgba(15, 23, 42, .08) inset !important;
}

.customer-login-modal--professional .customer-login-modal__dialog:focus {
  outline: 3px solid rgba(38, 208, 240, .55);
  outline-offset: 4px;
}

.customer-login-modal--professional .customer-login-modal__layout {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr) !important;
  min-height: 620px !important;
}

.customer-login-modal--professional .customer-login-modal__intro {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(34px, 5vw, 64px);
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(7, 16, 31, .96), rgba(17, 34, 64, .94)),
    url('../img/header-krankenhausalarm.webp') center / cover no-repeat;
  isolation: isolate;
}

.customer-login-modal--professional .customer-login-modal__intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 18%, rgba(38, 208, 240, .28), transparent 34%),
    linear-gradient(180deg, rgba(11, 18, 32, .1), rgba(11, 18, 32, .62));
}

.customer-login-modal--professional .customer-login-modal__eyebrow {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #d9fbff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.customer-login-modal--professional .customer-login-modal__eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #00b8d9;
  box-shadow: 0 0 18px rgba(0, 184, 217, .9);
}

.customer-login-modal--professional h2 {
  margin: clamp(34px, 6vw, 86px) 0 22px !important;
  max-width: 640px !important;
  color: #ffffff !important;
  font-size: clamp(38px, 5.2vw, 68px) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
}

.customer-login-modal--professional #customer-login-modal-desc {
  max-width: 620px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, .84) !important;
  font-size: clamp(17px, 1.45vw, 21px) !important;
  line-height: 1.68 !important;
}

.customer-login-modal--professional .customer-login-modal__trust {
  display: grid;
  gap: 10px;
  margin-top: 40px;
}

.customer-login-modal--professional .customer-login-modal__trust span {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 12px 14px 12px 38px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .075);
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.customer-login-modal--professional .customer-login-modal__trust span::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: #00b8d9;
}

.customer-login-modal--professional .customer-login-modal__panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(30px, 4.5vw, 56px) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.customer-login-modal--professional .customer-login-modal__panel-head {
  display: grid;
  gap: 10px;
}

.customer-login-modal--professional .customer-login-modal__status {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #e6f9fd;
  color: #006d83;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.customer-login-modal--professional .customer-login-modal__status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #00b8d9;
}

.customer-login-modal--professional .customer-login-modal__panel-head strong {
  color: #0b1220;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.customer-login-modal--professional .customer-login-modal__panel-head small {
  max-width: 620px;
  color: #475569;
  font-size: 15px;
  line-height: 1.65;
}

.customer-login-modal--professional .customer-login-modal__form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: clamp(22px, 3vw, 30px) !important;
  border-radius: 26px !important;
  border: 1px solid rgba(15, 23, 42, .1) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .08) !important;
}

.customer-login-modal--professional .customer-login-modal__form label {
  display: grid !important;
  gap: 8px !important;
  color: #112240 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .03em;
}

.customer-login-modal--professional .customer-login-modal__form input {
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  border: 1px solid #cddde9 !important;
  background: #f8fafc !important;
  color: #0b1220 !important;
  font: 750 16px/1.2 inherit !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

.customer-login-modal--professional .customer-login-modal__form input:focus {
  outline: 3px solid rgba(0, 184, 217, .18) !important;
  border-color: #00b8d9 !important;
  background: #ffffff !important;
}

.customer-login-modal--professional .customer-login-modal__submit {
  width: 100%;
  min-height: 60px !important;
  justify-content: center;
  margin-top: 2px;
  border-radius: 16px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.customer-login-modal--professional .customer-login-modal__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.customer-login-modal--professional .customer-login-modal__cards article {
  min-height: 150px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, .09);
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .06);
}

.customer-login-modal--professional .customer-login-modal__cards b {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #e6f9fd;
  color: #006d83;
  font-size: 12px;
  font-weight: 900;
}

.customer-login-modal--professional .customer-login-modal__cards strong {
  display: block;
  margin-bottom: 7px;
  color: #0b1220;
  font-size: 15px;
  line-height: 1.2;
}

.customer-login-modal--professional .customer-login-modal__cards span {
  display: block;
  color: #5e6e83;
  font-size: 13px;
  line-height: 1.48;
}

.customer-login-modal--professional .customer-login-modal__note {
  margin: 0 !important;
  padding: 15px 17px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 184, 217, .18) !important;
  background: rgba(0, 184, 217, .07) !important;
  color: #344d6a !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.customer-login-modal--professional .customer-login-modal__error {
  margin: 0 !important;
  padding: 15px 17px !important;
  border-radius: 18px !important;
  color: #7f1d1d !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.customer-login-modal--professional .customer-login-modal__close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 5 !important;
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, .14) !important;
  background: rgba(255, 255, 255, .95) !important;
  color: #112240 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.customer-login-modal--professional .customer-login-modal__close:hover {
  background: #f8fafc !important;
  transform: translateY(-1px);
}

@media (max-width: 980px) {
  .customer-login-modal--professional .customer-login-modal__dialog {
    width: min(100%, 760px) !important;
  }

  .customer-login-modal--professional .customer-login-modal__layout {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .customer-login-modal--professional .customer-login-modal__intro {
    min-height: auto;
    padding: 34px 30px 28px;
  }

  .customer-login-modal--professional h2 {
    margin-top: 30px !important;
  }

  .customer-login-modal--professional .customer-login-modal__trust {
    grid-template-columns: 1fr;
    margin-top: 26px;
  }
}

@media (max-width: 680px) {
  .customer-login-modal.customer-login-modal--professional {
    align-items: flex-start !important;
    padding: 10px !important;
  }

  .customer-login-modal--professional .customer-login-modal__dialog {
    max-height: calc(100vh - 20px) !important;
    border-radius: 22px !important;
  }

  .customer-login-modal--professional .customer-login-modal__intro,
  .customer-login-modal--professional .customer-login-modal__panel {
    padding: 26px 20px !important;
  }

  .customer-login-modal--professional h2 {
    font-size: clamp(32px, 10vw, 42px) !important;
    letter-spacing: -.055em !important;
  }

  .customer-login-modal--professional #customer-login-modal-desc {
    font-size: 16px !important;
  }

  .customer-login-modal--professional .customer-login-modal__cards {
    grid-template-columns: 1fr;
  }

  .customer-login-modal--professional .customer-login-modal__cards article {
    min-height: auto;
  }

  .customer-login-modal--professional .customer-login-modal__close {
    top: 14px !important;
    right: 14px !important;
    width: 42px !important;
    height: 42px !important;
  }
}

/* ================================================================
   KRANKENHAUSALARM.DE · Kundenlogin Compact v034
   Zweck: kompaktes Modal ohne sichtbare rechte Laufleiste
   ================================================================ */
.customer-login-modal.customer-login-modal--professional {
  padding: clamp(14px, 2vw, 28px) !important;
}

.customer-login-modal--professional .customer-login-modal__dialog {
  width: min(96vw, 1020px) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  border-radius: clamp(22px, 2.3vw, 30px) !important;
}

.customer-login-modal--professional .customer-login-modal__dialog::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.customer-login-modal--professional .customer-login-modal__layout {
  grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr) !important;
  min-height: 0 !important;
}

.customer-login-modal--professional .customer-login-modal__intro {
  justify-content: center !important;
  gap: 24px !important;
  padding: clamp(28px, 3.4vw, 46px) !important;
}

.customer-login-modal--professional .customer-login-modal__eyebrow {
  padding: 8px 12px !important;
  font-size: 11px !important;
  letter-spacing: .085em !important;
}

.customer-login-modal--professional h2 {
  margin: 18px 0 14px !important;
  max-width: 520px !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  line-height: 1 !important;
  letter-spacing: -.06em !important;
}

.customer-login-modal--professional #customer-login-modal-desc {
  max-width: 500px !important;
  font-size: clamp(15px, 1.08vw, 18px) !important;
  line-height: 1.55 !important;
}

.customer-login-modal--professional .customer-login-modal__trust {
  gap: 8px !important;
  margin-top: 22px !important;
}

.customer-login-modal--professional .customer-login-modal__trust span {
  min-height: 38px !important;
  padding: 9px 12px 9px 34px !important;
  border-radius: 14px !important;
  font-size: 12.5px !important;
}

.customer-login-modal--professional .customer-login-modal__trust span::before {
  left: 14px !important;
  width: 7px !important;
  height: 7px !important;
}

.customer-login-modal--professional .customer-login-modal__panel {
  gap: 15px !important;
  padding: clamp(26px, 3.2vw, 42px) !important;
}

.customer-login-modal--professional .customer-login-modal__panel-head {
  gap: 7px !important;
}

.customer-login-modal--professional .customer-login-modal__status {
  padding: 7px 11px !important;
  font-size: 11px !important;
}

.customer-login-modal--professional .customer-login-modal__panel-head strong {
  font-size: clamp(26px, 2.45vw, 34px) !important;
}

.customer-login-modal--professional .customer-login-modal__panel-head small {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

.customer-login-modal--professional .customer-login-modal__form {
  gap: 11px !important;
  padding: clamp(18px, 2.2vw, 24px) !important;
  border-radius: 22px !important;
}

.customer-login-modal--professional .customer-login-modal__form label {
  gap: 6px !important;
  font-size: 12px !important;
}

.customer-login-modal--professional .customer-login-modal__form input {
  min-height: 50px !important;
  border-radius: 14px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
}

.customer-login-modal--professional .customer-login-modal__submit {
  min-height: 52px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

.customer-login-modal--professional .customer-login-modal__cards {
  gap: 10px !important;
}

.customer-login-modal--professional .customer-login-modal__cards article {
  min-height: 116px !important;
  padding: 14px !important;
  border-radius: 17px !important;
}

.customer-login-modal--professional .customer-login-modal__cards b {
  width: 28px !important;
  height: 28px !important;
  margin-bottom: 9px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

.customer-login-modal--professional .customer-login-modal__cards strong {
  margin-bottom: 5px !important;
  font-size: 13px !important;
}

.customer-login-modal--professional .customer-login-modal__cards span {
  font-size: 12px !important;
  line-height: 1.38 !important;
}

.customer-login-modal--professional .customer-login-modal__note {
  padding: 11px 13px !important;
  border-radius: 15px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.customer-login-modal--professional .customer-login-modal__error {
  padding: 12px 14px !important;
  border-radius: 15px !important;
  font-size: 13px !important;
}

.customer-login-modal--professional .customer-login-modal__close {
  top: 15px !important;
  right: 15px !important;
  width: 40px !important;
  height: 40px !important;
  font-size: 25px !important;
}

@media (max-width: 980px) {
  .customer-login-modal--professional .customer-login-modal__dialog {
    width: min(100%, 760px) !important;
    max-height: calc(100vh - 28px) !important;
    overflow: auto !important;
    scrollbar-width: none !important;
  }

  .customer-login-modal--professional .customer-login-modal__intro {
    padding: 30px 28px 26px !important;
  }

  .customer-login-modal--professional h2 {
    margin-top: 18px !important;
  }

  .customer-login-modal--professional .customer-login-modal__trust {
    margin-top: 18px !important;
  }
}

@media (max-width: 680px) {
  .customer-login-modal.customer-login-modal--professional {
    align-items: flex-start !important;
    padding: 8px !important;
  }

  .customer-login-modal--professional .customer-login-modal__dialog {
    max-height: calc(100vh - 16px) !important;
    border-radius: 20px !important;
  }

  .customer-login-modal--professional .customer-login-modal__intro,
  .customer-login-modal--professional .customer-login-modal__panel {
    padding: 24px 18px !important;
  }

  .customer-login-modal--professional h2 {
    font-size: clamp(30px, 9vw, 40px) !important;
  }
}


/* ===== Homepage · mobile Alarmbilder v035 ===== */
.mobile-alarm-focus-section {
  position: relative;
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
  background:
    radial-gradient(circle at top left, rgba(0, 184, 217, 0.08), transparent 36%),
    linear-gradient(180deg, #f8fbfd 0%, #eef5f8 100%);
}

.mobile-alarm-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
}

.mobile-alarm-focus-copy h2 {
  margin-bottom: 1rem;
}

.mobile-alarm-focus-copy p {
  max-width: 62ch;
}

.mobile-alarm-focus-lead {
  font-size: 1.08rem;
  color: var(--text-strong, #233247);
}

.mobile-alarm-focus-points {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.95rem;
  margin-top: 1.5rem;
}

.mobile-alarm-focus-point {
  padding: 1.05rem 1.15rem;
  border: 1px solid rgba(17, 34, 64, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 30px rgba(11, 18, 32, 0.06);
}

.mobile-alarm-focus-point strong {
  display: block;
  margin-bottom: 0.4rem;
  color: #112240;
  font-size: 1rem;
}

.mobile-alarm-focus-point span {
  display: block;
  color: #516074;
  line-height: 1.6;
}

.mobile-alarm-focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.mobile-alarm-focus-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(17, 34, 64, 0.08);
  border: 1px solid rgba(17, 34, 64, 0.10);
  color: #112240;
  font-weight: 700;
  font-size: 0.94rem;
}

.mobile-alarm-focus-visuals {
  display: grid;
  gap: 1.15rem;
}

.mobile-alarm-photo-card,
.mobile-alarm-dashboard-card {
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(17, 34, 64, 0.10);
  background: #ffffff;
  box-shadow: 0 24px 48px rgba(11, 18, 32, 0.12);
}

.mobile-alarm-photo-card img,
.mobile-alarm-dashboard-card img {
  display: block;
  width: 100%;
  height: auto;
}

.mobile-alarm-photo-card figcaption {
  display: grid;
  gap: 0.35rem;
  padding: 1.05rem 1.2rem 1.2rem;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(236, 243, 247, 1));
}

.mobile-alarm-photo-card figcaption strong {
  color: #112240;
  font-size: 1.05rem;
}

.mobile-alarm-photo-card figcaption span {
  color: #5b697b;
  line-height: 1.55;
}

.mobile-alarm-dashboard-card {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
}

.mobile-alarm-dashboard-card__copy {
  padding: 1.25rem 1.2rem;
}

.mobile-alarm-dashboard-card__copy h3 {
  margin: 0.4rem 0 0.65rem;
  color: #112240;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.mobile-alarm-dashboard-card__copy p {
  margin: 0;
  color: #5b697b;
  line-height: 1.6;
}

.mobile-alarm-dashboard-card__image {
  background: #dfeaf0;
}

.mobile-alarm-dashboard-card__image img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1080px) {
  .mobile-alarm-focus-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-alarm-focus-copy p {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .mobile-alarm-focus-section {
    padding: 4rem 0;
  }

  .mobile-alarm-focus-point {
    padding: 0.95rem 1rem;
    border-radius: 16px;
  }

  .mobile-alarm-dashboard-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-alarm-dashboard-card__copy {
    padding: 1.1rem 1rem 0.9rem;
  }
}

/* ===== Homepage · mobile Alarmbilder v036 ===== */
.mobile-alarm-focus-section {
  padding: clamp(3.75rem, 5.5vw, 5rem) 0;
}

.mobile-alarm-focus-grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(440px, 0.86fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.mobile-alarm-focus-visuals {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(230px, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.mobile-alarm-photo-card {
  align-self: start;
  max-width: 340px;
  justify-self: end;
}

.mobile-alarm-photo-card img {
  height: 430px;
  object-fit: cover;
  object-position: 50% 42%;
}

.mobile-alarm-photo-card figcaption {
  padding: 0.75rem 0.95rem 0.85rem;
}

.mobile-alarm-photo-card figcaption span {
  display: none;
}

.mobile-alarm-dashboard-card {
  align-self: start;
  grid-template-columns: minmax(0, 1fr);
}

.mobile-alarm-dashboard-card__copy {
  padding: 1rem 1rem 0.85rem;
}

.mobile-alarm-dashboard-card__copy p {
  font-size: 0.94rem;
}

.mobile-alarm-dashboard-card__image img {
  height: 210px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1080px) {
  .mobile-alarm-focus-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-alarm-focus-visuals {
    grid-template-columns: minmax(220px, 0.55fr) minmax(260px, 1fr);
  }

  .mobile-alarm-photo-card {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .mobile-alarm-focus-visuals {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-alarm-photo-card {
    max-width: 100%;
    justify-self: stretch;
  }

  .mobile-alarm-photo-card img {
    height: 360px;
  }

  .mobile-alarm-dashboard-card__image img {
    height: 190px;
  }
}

/* Ergänzung 2026-07-04: Alarmierungsmöglichkeiten auf der Website */
.x-channel-grid--alarmways{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.x-channel-grid--alarmways article{
  min-height:100%;
}
@media (max-width: 980px){
  .x-channel-grid--alarmways{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 680px){
  .x-channel-grid--alarmways{grid-template-columns:1fr;}
}

/* ===== Systemaufbau und Erfahrung · v006 ===== */
.system-architecture-page { background:#f8fafc; }
.system-architecture-hero { padding:clamp(7rem,10vw,9rem) 0 clamp(4rem,7vw,6rem); background:linear-gradient(135deg,#0b1220 0%,#112240 65%,#0b3550 100%); color:#fff; }
.system-architecture-hero__grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.system-architecture-hero .section-label { color:#6ee7f5; }
.system-architecture-hero h1 { max-width:900px; margin:.6rem 0 1.2rem; font-size:clamp(2.4rem,5vw,4.7rem); line-height:1.02; letter-spacing:-.04em; }
.system-architecture-lead { max-width:860px; color:#d8e4ee; font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.75; }
.experience-card { padding:clamp(1.6rem,3vw,2.4rem); border:1px solid rgba(255,255,255,.18); border-radius:24px; background:rgba(255,255,255,.08); box-shadow:0 24px 60px rgba(0,0,0,.18); backdrop-filter:blur(10px); }
.experience-card strong { display:block; color:#fff; font-size:clamp(3rem,6vw,5rem); line-height:1; letter-spacing:-.05em; }
.experience-card > span { display:block; margin:.55rem 0 1.1rem; color:#6ee7f5; font-weight:700; }
.experience-card p { color:#d8e4ee; line-height:1.65; }
.system-flow-section,.system-components-section,.system-experience-section,.system-boundary-section { padding:clamp(4rem,7vw,6.5rem) 0; }
.system-components-section { background:#fff; }
.system-section-heading { max-width:800px; margin-bottom:2.4rem; }
.system-section-heading h2,.system-experience-section h2,.system-boundary-card h2 { margin:.5rem 0 .8rem; font-size:clamp(2rem,3.8vw,3.3rem); line-height:1.08; letter-spacing:-.035em; color:#0b1220; }
.system-section-heading p { color:var(--muted); font-size:1.05rem; }
.system-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; list-style:none; margin:0; padding:0; counter-reset:none; }
.system-flow li { position:relative; min-height:230px; padding:1.6rem; border:1px solid #dce5ec; border-radius:20px; background:#fff; box-shadow:0 12px 34px rgba(11,18,32,.06); }
.system-flow li::after { content:""; position:absolute; top:2.2rem; right:-1rem; width:1rem; height:2px; background:#00b8d9; }
.system-flow li:nth-child(3)::after,.system-flow li:nth-child(6)::after { display:none; }
.system-flow__number { display:inline-flex; margin-bottom:1.6rem; color:#0090ab; font-weight:800; letter-spacing:.12em; }
.system-flow h3,.system-components-grid h3 { margin:0 0 .65rem; color:#0b1220; font-size:1.15rem; }
.system-flow p,.system-components-grid p { margin:0; color:#526174; line-height:1.65; }
.system-components-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.system-components-grid article { padding:1.45rem; border:1px solid #dce5ec; border-radius:18px; background:#f8fafc; }
.system-icon { display:grid; place-items:center; width:46px; height:46px; margin-bottom:1.15rem; border-radius:12px; background:#e6f8fb; color:#007d95; }
.system-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.system-experience-section { background:#0b1220; color:#fff; }
.system-experience-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.system-experience-section .section-label { color:#6ee7f5; }
.system-experience-section h2 { color:#fff; }
.system-experience-section p { color:#d7e1ea; font-size:1.05rem; line-height:1.8; }
.system-experience-section p + p { margin-top:1rem; }
.system-boundary-card { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,5rem); padding:clamp(1.7rem,4vw,3rem); border:1px solid #dce5ec; border-left:5px solid #00b8d9; border-radius:20px; background:#fff; }
.system-boundary-card p { margin:0; color:#526174; line-height:1.75; font-size:1.03rem; }
@media (max-width:1050px){
  .system-architecture-hero__grid,.system-experience-grid,.system-boundary-card{grid-template-columns:1fr;}
  .system-components-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:780px){
  .system-flow{grid-template-columns:1fr;}
  .system-flow li{min-height:auto;}
  .system-flow li::after{display:none;}
  .system-components-grid{grid-template-columns:1fr;}
  .system-architecture-hero{padding-top:6rem;}
}

/* ===== Homepage Erfahrung · v006 ===== */
.homepage-experience-section { padding:clamp(3.5rem,6vw,5.5rem) 0; background:#eef5f8; }
.homepage-experience-card { display:grid; grid-template-columns:minmax(210px,.32fr) minmax(0,1fr); gap:clamp(1.7rem,4vw,4rem); align-items:center; padding:clamp(1.6rem,4vw,3rem); border:1px solid #d7e3ea; border-radius:24px; background:#fff; box-shadow:0 18px 50px rgba(11,18,32,.07); }
.homepage-experience-stat { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:210px; border-radius:20px; background:linear-gradient(145deg,#0b1220,#112f4a); color:#fff; text-align:center; }
.homepage-experience-stat strong { font-size:clamp(4.5rem,8vw,7rem); line-height:.9; letter-spacing:-.07em; }
.homepage-experience-stat span { margin-top:.8rem; color:#6ee7f5; font-weight:700; }
.homepage-experience-copy h2 { margin:.45rem 0 1rem; max-width:850px; color:#0b1220; font-size:clamp(2rem,3.8vw,3.25rem); line-height:1.08; letter-spacing:-.035em; }
.homepage-experience-copy p { max-width:900px; margin:0 0 1.4rem; color:#526174; font-size:1.05rem; line-height:1.75; }
@media (max-width:800px){
  .homepage-experience-card{grid-template-columns:1fr;}
  .homepage-experience-stat{min-height:170px;}
}

/* v007 – Enterprise-Systemarchitektur und robuste Kontraste */
.system-architecture-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(6.6rem,9vw,8.5rem) 0 clamp(4.5rem,7vw,6.5rem);
  background:
    radial-gradient(circle at 18% 24%,rgba(0,184,217,.15),transparent 30%),
    radial-gradient(circle at 82% 65%,rgba(38,208,240,.09),transparent 34%),
    linear-gradient(135deg,#07101f 0%,#0b1830 52%,#0b3550 100%);
  color:#fff;
}
.system-architecture-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 92%);
}
.system-architecture-hero__grid{position:relative;z-index:1;grid-template-columns:minmax(0,1.55fr) minmax(300px,.62fr);gap:clamp(2rem,4.2vw,4.5rem);align-items:center}
.system-architecture-visual-wrap{min-width:0}
.system-architecture-hero h1{max-width:850px;margin:.65rem 0 1rem;color:#fff!important;font-size:clamp(2.55rem,4.6vw,4.9rem);line-height:1.01;letter-spacing:-.045em;text-shadow:0 3px 20px rgba(0,0,0,.32)}
.system-architecture-lead{max-width:900px;margin:0 0 2rem;color:#dbe8f2!important;font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.72}
.architecture-visual{position:relative;display:grid;grid-template-columns:minmax(150px,.9fr) 48px minmax(190px,1.08fr) 48px minmax(150px,.9fr);gap:12px;align-items:center;padding:clamp(1.2rem,2.2vw,1.8rem);border:1px solid rgba(255,255,255,.16);border-radius:26px;background:rgba(7,16,31,.52);box-shadow:0 28px 70px rgba(0,0,0,.24);backdrop-filter:blur(12px)}
.architecture-column{display:grid;gap:10px}
.architecture-column__label,.architecture-core__eyebrow{display:block;margin-bottom:2px;color:#6ee7f5;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.architecture-node{display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.07);color:#fff}
.architecture-node__icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:8px;background:rgba(0,184,217,.16);color:#8cecf7;font-size:1rem}
.architecture-node strong{font-size:.88rem;line-height:1.2}
.architecture-core{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:214px;padding:18px;border:1px solid rgba(110,231,245,.4);border-radius:22px;background:linear-gradient(145deg,rgba(0,184,217,.18),rgba(17,34,64,.72));text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 45px rgba(0,0,0,.22)}
.architecture-core__shield{display:grid;place-items:center;width:76px;height:76px;margin:13px 0 10px;border-radius:22px;background:linear-gradient(145deg,#00b8d9,#007d95);box-shadow:0 16px 30px rgba(0,184,217,.24)}
.architecture-core__shield svg{width:48px;height:48px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.architecture-core strong{color:#fff;font-size:1.15rem}
.architecture-core>span:last-child{margin-top:4px;color:#c8d8e4;font-size:.82rem}
.architecture-arrow{display:flex;align-items:center;justify-content:center}
.architecture-arrow span{position:relative;width:100%;height:2px;background:linear-gradient(90deg,rgba(110,231,245,.25),#6ee7f5)}
.architecture-arrow span::after{content:"";position:absolute;right:-1px;top:50%;width:9px;height:9px;border-top:2px solid #6ee7f5;border-right:2px solid #6ee7f5;transform:translateY(-50%) rotate(45deg)}
.architecture-feedback{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:4px;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);color:#b9ccd9;font-size:.76rem;font-weight:700;letter-spacing:.03em}
.architecture-feedback i{width:20px;height:1px;background:rgba(110,231,245,.5)}
.experience-card{align-self:center;background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.065));border-color:rgba(255,255,255,.2)}
.experience-card strong{color:#fff!important}
.experience-card p{margin-bottom:0;color:#dbe8f2!important}

@media (max-width:1080px){
  .system-architecture-hero__grid{grid-template-columns:1fr}
  .experience-card{max-width:none;display:grid;grid-template-columns:auto 1fr;column-gap:24px;align-items:center}
  .experience-card strong{grid-row:1/3}
  .experience-card>span{margin:.1rem 0 .4rem}
  .experience-card p{grid-column:2}
}
@media (max-width:760px){
  .system-architecture-hero{padding-top:5.8rem}
  .system-architecture-hero h1{font-size:clamp(2.25rem,11.5vw,3.5rem)}
  .architecture-visual{grid-template-columns:1fr;gap:10px;padding:1rem;border-radius:20px}
  .architecture-arrow{height:22px;transform:rotate(90deg)}
  .architecture-arrow span{width:22px}
  .architecture-core{min-height:180px}
  .architecture-feedback{grid-column:1;flex-wrap:wrap;gap:7px 8px;text-align:center}
  .experience-card{display:block}
  .experience-card>span{margin:.55rem 0 1rem}
}


/* v008 · Kontakt- und Sicherheitsdarstellung */
.contact-method-list > div{position:relative;padding:1rem 1.05rem;border:1px solid rgba(148,163,184,.28);border-radius:14px;background:rgba(255,255,255,.76)}
.contact-method-list dt,.legal-contact-label{font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#526274;margin-bottom:.28rem}
.contact-method-list dd{margin:0}.contact-value-link,.contact-method-list a{font-variant-numeric:tabular-nums;text-decoration:none;font-weight:760;white-space:nowrap;letter-spacing:.015em}
.contact-value-link:hover,.contact-method-list a:hover{text-decoration:underline;text-underline-offset:.2em}
.legal-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:1rem 0 1.5rem}
.legal-contact-item{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.05rem;border:1px solid #dbe4ec;border-radius:14px;background:#f8fafc;min-width:0}
.legal-contact-item a{font-variant-numeric:tabular-nums;font-weight:750;color:#075f73;text-decoration:none;overflow-wrap:anywhere}
.legal-contact-item a:hover{text-decoration:underline;text-underline-offset:.2em}
.portal-access-card{max-width:780px}.portal-access-actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.5rem 0}.legal-note{padding:1rem 1.1rem;border-left:4px solid #00b8d9;background:#f1fbfd;color:#334155}
@media (max-width:640px){.legal-contact-grid{grid-template-columns:1fr}.contact-value-link,.contact-method-list a{white-space:normal}.portal-access-actions .btn{width:100%;justify-content:center}}


/* ================================================================
   KRANKENHAUSALARM.DE · Supportseite v017
   ================================================================ */
.support-page .support-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.support-page .support-hero-actions .btn-secondary {
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.support-page .support-hero-actions .btn-secondary:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
}
.support-services-section,
.support-topics-section {
  padding: clamp(58px, 7vw, 92px) 0;
  background: #f8fafc;
}
.support-services-section { border-bottom: 1px solid #dbe7f1; }
.support-topics-section { border-top: 1px solid #dbe7f1; }
.support-section-heading { max-width: 760px; margin-bottom: 28px; }
.support-section-heading h2 {
  margin: 10px 0 0;
  color: #0b1220;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.06;
  letter-spacing: -.05em;
}
.support-service-grid,
.support-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.support-service-card,
.support-topic-grid article {
  padding: 24px;
  border: 1px solid #dbe7f1;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 45px rgba(11,18,32,.07);
}
.support-service-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: #e5f8fc;
  color: #007e96;
  font-size: 12px;
  font-weight: 950;
}
.support-service-card h3,
.support-topic-grid h3 {
  margin: 0 0 9px;
  color: #0b1220;
  font-size: 18px;
  letter-spacing: -.025em;
}
.support-service-card p,
.support-topic-grid p {
  margin: 0;
  color: #526277;
  font-size: 14px;
  line-height: 1.65;
}
.support-topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.support-upload-field small {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}
.support-upload-field input[type="file"] {
  padding: 10px;
  min-height: 54px;
}
.support-upload-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  background: #e5f8fc;
  color: #006f85;
  font-weight: 850;
  cursor: pointer;
}
@media (max-width: 1000px) {
  .support-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .support-page .support-hero-actions { flex-direction: column; align-items: stretch; }
  .support-page .support-hero-actions .btn { width: 100%; text-align: center; }
  .support-service-grid,
  .support-topic-grid { grid-template-columns: 1fr; }
}


/* ===== v018 · Transparente Demodaten, Produktabgrenzung und Rechtstexte ===== */
.x-demo-note{
  position:relative;
  margin:16px 2px 0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  color:rgba(235,244,252,.74);
  font-size:12px;
  line-height:1.55;
}
.homepage-experience-stat span{
  max-width:210px;
  padding-inline:16px;
  line-height:1.35;
}
.mobile-app-access-note{
  margin:1.25rem 0 1.5rem;
  padding:1rem 1.1rem;
  border-left:4px solid #00b8d9;
  border-radius:0 14px 14px 0;
  background:#eef9fc;
  color:#334155;
  line-height:1.65;
}
.product-boundary-note{
  grid-column:1/-1;
  margin-top:1.6rem;
  padding:1.25rem 1.4rem;
  border:1px solid #cfdde6;
  border-left:5px solid #00b8d9;
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 38px rgba(15,23,42,.06);
}
.product-boundary-note strong{display:block;margin-bottom:.45rem;color:#0b1220;font-size:1.05rem}
.product-boundary-note p{margin:0;color:#475569;font-size:1rem;line-height:1.7}
.system-boundary-copy{display:grid;gap:1rem}
.system-boundary-copy p{margin:0}
@media (max-width:760px){
  .x-panel-top{align-items:flex-start;flex-direction:column}
  .x-time{white-space:normal}
  .product-boundary-note{margin-top:.5rem}
}

/* v018: neutrale Kennzeichnung der fiktiven Dashboard-Darstellung */
.x-demo-tag{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:rgba(0,184,217,.12);border:1px solid rgba(38,208,240,.24);color:#dffbff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}

.x-panel-label{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:rgba(0,184,217,.12);border:1px solid rgba(38,208,240,.24);color:#dffbff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}

/* ================================================================
   KRANKENHAUSALARM.DE · Offizielle Markenassets v019
   Stand: 2026-08-31
   Zweck: Alte zusammengesetzte Wort-/Bildmarken durch die gelieferten
   SVG-Logos ersetzen und auf Desktop, Tablet und Mobil sauber skalieren.
   ================================================================ */
.site-header {
  min-height: 78px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.brand.brand--krankenhausalarm {
  display: inline-flex !important;
  align-items: center !important;
  width: clamp(188px, 16vw, 232px) !important;
  min-width: clamp(188px, 16vw, 232px) !important;
  max-width: 232px !important;
  gap: 0 !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

.brand-logo-lockup {
  display: block;
  width: 100%;
  height: auto;
  max-height: 68px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .24));
}

/* Frühere, manuell zusammengesetzte Header-/Footer-Marken bleiben deaktiviert. */
.brand-shield-img,
.brand-wordmark,
.footer-brand-shield,
.footer-brand-wordmark {
  display: none !important;
}

.footer-brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  width: min(310px, 100%);
  margin-bottom: 18px;
}

.footer-brand-logo-lockup {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .24));
}

/* Geliefertes Markenbanner: helle Fläche, unverzerrtes Originalformat. */
.brand-panorama.brand-panorama--banner {
  background: #f7f8fa !important;
  border-color: rgba(67, 76, 85, .16) !important;
  box-shadow: 0 34px 84px -42px rgba(15, 23, 42, .38), 0 0 0 1px rgba(255,255,255,.7) inset !important;
}

.brand-panorama.brand-panorama--banner img {
  aspect-ratio: 1983 / 793;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Zweite Markenfläche bewusst als ruhige Logo-Karte statt Banner-Duplikat. */
.x-solution-brand-card {
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: clamp(42px, 6vw, 76px) clamp(30px, 5vw, 68px) 86px;
  background:
    radial-gradient(circle at 12% 10%, rgba(189, 21, 27, .08), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f7f8fa 100%) !important;
  border-color: rgba(67, 76, 85, .16) !important;
}

.x-solution-brand-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(67,76,85,.04)) !important;
}

.x-solution-brand-logo {
  position: relative;
  z-index: 1;
  width: min(650px, 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 18px 32px rgba(67, 76, 85, .12));
}

.x-solution-brand-card figcaption span {
  background: rgba(67, 76, 85, .90) !important;
  border-color: rgba(255, 255, 255, .30) !important;
}

@media (max-width: 1200px) {
  .brand.brand--krankenhausalarm {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
  }
  .brand-logo-lockup { max-height: 62px; }
}

@media (max-width: 720px) {
  .site-header {
    min-height: 66px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  .brand.brand--krankenhausalarm {
    width: clamp(150px, 48vw, 174px) !important;
    min-width: 0 !important;
    max-width: 174px !important;
  }
  .brand-logo-lockup {
    max-height: 56px;
    filter: drop-shadow(0 6px 15px rgba(0, 0, 0, .22));
  }
  .footer-brand-lockup { width: min(270px, 100%); }
  .x-solution-brand-card {
    min-height: 250px;
    padding: 38px 24px 76px;
  }
}

@media (max-width: 390px) {
  .brand.brand--krankenhausalarm {
    width: 142px !important;
    max-width: 142px !important;
  }
}

/* Banner-spezifische Rücknahme der früheren Krankenhausfoto-Überlagerung. */
.brand-panorama.brand-panorama--clinic.brand-panorama--banner {
  min-height: 0 !important;
  height: auto !important;
  isolation: auto !important;
}

.brand-panorama.brand-panorama--clinic.brand-panorama--banner::before {
  display: none !important;
  content: none !important;
}

.brand-panorama.brand-panorama--clinic.brand-panorama--banner picture,
.brand-panorama.brand-panorama--clinic.brand-panorama--banner img {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  filter: none !important;
}

@media (max-width: 640px) {
  .brand-panorama.brand-panorama--clinic.brand-panorama--banner,
  .brand-panorama.brand-panorama--clinic.brand-panorama--banner picture,
  .brand-panorama.brand-panorama--clinic.brand-panorama--banner img {
    min-height: 0 !important;
    height: auto !important;
  }
}