/* Password strength indicator styles */
.password-strength { margin-top: 4px; font-size: 0.85rem; }
.password-strength.weak { color: #e05c4b; }
.password-strength.medium { color: #e8a03e; }
.password-strength.strong { color: #4caf87; }

/* ============================================================
   MOSCHMEDICAL — REDESIGN 2025
   Aesthetic: Dark Precision / Clinical Luxury
   Typography: Fraunces (display) + DM Sans (body)
   Palette: Deep navy, warm off-white, gold accent
   ============================================================ */

:root {
  --navy:        #0b1526;
  --navy-mid:    #111f35;
  --navy-light:  #1a2e4a;
  --navy-border: #243550;
  --gold:        #c8a96e;
  --gold-light:  #e2c98c;
  --gold-dim:    rgba(200,169,110,0.15);
  --teal:        #3eb8a0;
  --teal-dim:    rgba(62,184,160,0.12);
  --white:       #f5f3ef;
  --white-off:   #ede9e2;
  --muted:       #7a8ea8;
  --muted-light: #a8bbd0;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --r-sm:  6px; --r-md:  10px; --r-lg:  16px;
  --r-xl:  24px; --r-2xl: 36px; --r-full: 9999px;
  --shadow-card: 0 4px 32px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 40px rgba(200,169,110,0.12);
  --transition: 240ms cubic-bezier(0.4,0,0.2,1);
  --container: 1240px; --gap: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  color: var(--white); background: var(--navy);
}
img, svg { display: block; max-width: 100%; }
a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-light); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.container {
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding-left: var(--gap); padding-right: var(--gap);
}

.text-gradient {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 60%, var(--teal) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-success { color: var(--teal); }

.section-label {
  display: inline-block; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem;
}
.section-title {
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400; line-height: 1.18; color: var(--white); margin-bottom: 1.25rem;
}
.section-subtitle { font-size: 1.05rem; color: var(--muted-light); line-height: 1.7; max-width: 600px; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; font-size: 0.95rem; font-weight: 500;
  border-radius: var(--r-full); transition: all var(--transition);
  cursor: pointer; border: none; letter-spacing: 0.01em; position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.08); opacity: 0; transition: opacity var(--transition);
}
.btn:hover::after { opacity: 1; }
.btn-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, #b8924e 100%);
  color: var(--navy); font-weight: 600; box-shadow: 0 4px 20px rgba(200,169,110,0.3);
}
.btn-primary:hover { color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(200,169,110,0.45); }

.btn-secondary {
  background: transparent; color: var(--white); border: 1px solid var(--navy-border);
}
.btn-secondary:hover { color: var(--white); border-color: var(--gold); background: var(--gold-dim); }

.btn-sm { padding: 0.5rem 1.1rem; font-size: 0.85rem; }
.btn-lg { padding: 0.9rem 2rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* BADGES */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: 500; border-radius: var(--r-full);
}
.badge-primary {
  background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(200,169,110,0.25);
}
.badge-icon { width: 0.9em; height: 0.9em; }

/* NAVBAR */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; transition: background var(--transition), backdrop-filter var(--transition);
}
.navbar.scrolled {
  background: rgba(11,21,38,0.92); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--navy-border);
}
.navbar-container {
  display: flex; align-items: center; gap: 2rem; height: 68px;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gap);
}
.navbar-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.navbar-logo .logo-text {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  color: var(--white); letter-spacing: -0.01em;
}
.navbar-menu { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.navbar-link {
  /* Increase padding to enlarge the clickable area of navigation items */
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  color: var(--muted-light);
  border-radius: var(--r-full);
  transition: all var(--transition);
}
.navbar-link:hover { color: var(--white); background: rgba(255,255,255,0.06); }

/* Active state for navigation links. When a page is active the link gains a subtle
   highlight to aid orientation. We reuse existing colours so the design
   remains consistent. */
.navbar-link.active {
  color: var(--white);
  background: rgba(255,255,255,0.08);
  font-weight: 500;
}
.navbar-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: 1rem; }
.navbar-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.navbar-toggle-bar {
  display: block; width: 22px; height: 2px; background: var(--white);
  border-radius: 2px; transition: all var(--transition);
}
.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(2) { opacity: 0; }
.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
  display: none; position: absolute; top: 68px; left: 0; right: 0;
  background: var(--navy-mid); border-bottom: 1px solid var(--navy-border); padding: 1rem 0;
}
.mobile-menu.open { display: block; }
.mobile-menu-list { padding: 0 var(--gap); }
.mobile-menu-link {
  display: block; padding: 0.75rem 0; color: var(--muted-light);
  font-size: 1rem; border-bottom: 1px solid var(--navy-border); transition: color var(--transition);
}
.mobile-menu-link:hover { color: var(--white); }
.mobile-menu-cta { padding: 1rem 0 0.5rem; border-bottom: none; }
.navbar-spacer { height: 68px; }

/* Dropdown navigation for Fachrichtungen
   The dropdown follows the existing MoschMedical colour palette and spacing.
   It appears on hover or keyboard focus of the parent list item and
   retains the look and feel of the primary navigation. */
.navbar-dropdown {
  position: relative;
}
.navbar-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--navy-mid);
  border: 1px solid var(--navy-border);
  border-radius: var(--r-sm);
  min-width: 220px;
  padding: 0.5rem 0;
  box-shadow: var(--shadow-card);
  z-index: 50;
}
.navbar-dropdown:hover .navbar-dropdown-menu,
.navbar-dropdown:focus-within .navbar-dropdown-menu {
  display: block;
}
.navbar-dropdown-menu .navbar-link {
  display: block;
  /* Increase padding for dropdown items to improve usability */
  padding: 0.55rem 0.9rem;
  color: var(--muted-light);
  border-radius: 0;
}
.navbar-dropdown-menu .navbar-link:hover {
  color: var(--white);
  background: rgba(255,255,255,0.06);
}

/* Keep dropdown open when hovering over the dropdown menu itself. Without this
   rule, moving the mouse from the parent item to the menu can cause
   flickering because the :hover state on the parent is lost. */
.navbar-dropdown-menu:hover {
  display: block;
}

/* HERO */
.hero {
  position: relative; min-height: calc(100vh - 68px);
  display: flex; align-items: center; overflow: hidden; padding: 5rem 0;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 70% 50%, rgba(62,184,160,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(200,169,110,0.07) 0%, transparent 55%),
    linear-gradient(160deg, #0b1526 0%, #0d1d34 100%);
  z-index: 0;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
  z-index: 0;
}
.hero-container {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gap);
}
.hero-content { display: flex; flex-direction: column; gap: 1.75rem; }
.hero-title {
  font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300; line-height: 1.1; color: var(--white); letter-spacing: -0.02em;
}
.hero-title strong { font-weight: 600; }
.hero-subtitle { font-size: 1.1rem; color: var(--muted-light); line-height: 1.75; max-width: 520px; }
.hero-subtitle strong { color: var(--white-off); font-weight: 500; }
.hero-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding-top: 0.5rem; border-top: 1px solid var(--navy-border);
}
.trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.trust-icon { width: 1.1em; height: 1.1em; color: var(--teal); flex-shrink: 0; }

/* Hero Visual */
.hero-visual { position: relative; }
.dashboard-preview { position: relative; animation: floatUp 1s ease both; }
@keyframes floatUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dashboard-card {
  background: var(--navy-mid); border: 1px solid var(--navy-border);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card), var(--shadow-glow);
}
.dashboard-header {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--navy-border); background: rgba(255,255,255,0.02);
}
.dashboard-dots { display: flex; gap: 6px; }
.dashboard-dots span { display: block; width: 10px; height: 10px; border-radius: 50%; }
.dashboard-dots span:nth-child(1) { background: #ff5f57; }
.dashboard-dots span:nth-child(2) { background: #febc2e; }
.dashboard-dots span:nth-child(3) { background: #28c840; }
.dashboard-title { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.dashboard-content { padding: 1.5rem; }
.map-visualization { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.map-zone {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1rem; border-radius: var(--r-md); position: relative; overflow: hidden;
}
.map-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  /*
   * Previously the `.map-zone::before` pseudo-element relied on the
   * `opacity` property to lighten the coloured overlay underneath.  Using
   * opacity globally reduces contrast for any elements layered above and
   * is discouraged.  Instead, remove the opacity here; we encode the
   * transparency directly into each zone's background colour.  See the
   * `.map-zone-core::before`, `.map-zone-mid::before`, and
   * `.map-zone-outer::before` rules below.
   */
}

/* Use semi-transparent colours directly on each zone pseudo-element
 * instead of relying on an inherited opacity.  A 12% alpha roughly
 * matches the previous visual weight.  This preserves contrast and
 * keeps the text on top clear and readable. */
.map-zone-core::before  { background: rgba(62, 184, 160, 0.12); }
.map-zone-mid::before   { background: rgba(200, 169, 110, 0.12); }
.map-zone-outer::before { background: rgba(122, 142, 168, 0.12); }
.map-zone-core  { border: 1px solid rgba(62,184,160,0.3); }
.map-zone-mid   { border: 1px solid rgba(200,169,110,0.3); }
.map-zone-outer { border: 1px solid var(--navy-border); }
.zone-label { font-size: 0.82rem; color: var(--muted-light); font-weight: 500; position: relative; }
.zone-value { font-size: 1rem; font-weight: 600; color: var(--white); position: relative; font-family: var(--font-display); }
.map-zone-core .zone-value  { color: var(--teal); }
.map-zone-mid .zone-value   { color: var(--gold); }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.stat-item {
  background: rgba(255,255,255,0.03); border: 1px solid var(--navy-border);
  border-radius: var(--r-md); padding: 0.75rem; text-align: center;
}
.stat-label { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-value { display: block; font-size: 1.15rem; font-weight: 600; color: var(--white); font-family: var(--font-display); }
.stat-value.text-success { color: var(--teal); }
.floating-card {
  position: absolute; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem; background: var(--navy-light); border: 1px solid var(--navy-border);
  border-radius: var(--r-full); font-size: 0.8rem; font-weight: 500; color: var(--white-off);
  box-shadow: var(--shadow-card); white-space: nowrap;
}
.floating-card svg { width: 1em; height: 1em; color: var(--teal); }
.floating-card-1 { bottom: -1rem; left: -2rem; animation: floatCard1 3s ease-in-out infinite alternate; }
.floating-card-2 { top: 1rem; right: -1.5rem; animation: floatCard2 3.5s ease-in-out infinite alternate; }
@keyframes floatCard1 { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes floatCard2 { from { transform: translateY(0); } to { transform: translateY(6px); } }

/* PROBLEM/SOLUTION */
.problem-solution {
  padding: 6rem 0; background: var(--navy-mid);
  border-top: 1px solid var(--navy-border); border-bottom: 1px solid var(--navy-border);
}
.problem-header { text-align: center; margin-bottom: 3.5rem; }
.problem-header .section-subtitle { margin: 0 auto; }
.problem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5px; background: var(--navy-border); border-radius: var(--r-lg); overflow: hidden;
}
.problem-item {
  background: var(--navy-mid); padding: 2.5rem 2rem;
  position: relative; transition: background var(--transition);
}
.problem-item:hover { background: var(--navy-light); }
.problem-item::before {
  content: ''; display: block; width: 32px; height: 2px;
  background: var(--gold); margin-bottom: 1.25rem;
}
.problem-item h3 {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 400;
  color: var(--white); margin-bottom: 0.75rem;
}
.problem-item p { color: var(--muted-light); font-size: 0.95rem; line-height: 1.7; }

/* FEATURES */
.features { padding: 6rem 0; }
.section-header { margin-bottom: 3.5rem; }
.section-header-center { text-align: center; }
.section-header-center .section-subtitle { margin: 0 auto; }
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--navy-border);
  border: 1px solid var(--navy-border); border-radius: var(--r-xl); overflow: hidden;
}
.feature-card {
  background: var(--navy-mid); padding: 2.25rem;
  display: flex; flex-direction: column; gap: 1rem; transition: background var(--transition);
}
.feature-card:hover { background: var(--navy-light); }
.feature-card-highlight {
  background: linear-gradient(135deg, rgba(200,169,110,0.08) 0%, var(--navy-mid) 100%);
}
.feature-card-highlight:hover {
  background: linear-gradient(135deg, rgba(200,169,110,0.15) 0%, var(--navy-light) 100%);
}
.feature-icon { width: 2.5rem; height: 2.5rem; color: var(--gold); }
.feature-icon svg { width: 100%; height: 100%; }
.feature-card-highlight .feature-icon { color: var(--gold-light); }
.feature-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--white); }
.feature-description { font-size: 0.9rem; color: var(--muted-light); line-height: 1.7; }
.feature-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; padding-top: 0.5rem; }
.feature-list li { font-size: 0.82rem; color: var(--muted); padding-left: 1.25rem; position: relative; }
.feature-list li::before {
  content: '✦'; position: absolute; left: 0; color: var(--teal); font-size: 0.65rem; top: 0.15em;
}

/* PROCESS */
.process {
  padding: 6rem 0; background: var(--navy-mid);
  border-top: 1px solid var(--navy-border); border-bottom: 1px solid var(--navy-border);
}
.process-header { text-align: center; margin-bottom: 4rem; }
.process-header .section-subtitle { margin: 0 auto; }
.process-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative;
}
.process-steps::before {
  content: ''; position: absolute; top: 2.5rem;
  left: calc(16.66% + 1.5rem); right: calc(16.66% + 1.5rem); height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--teal) 100%);
}
.step { padding: 0 2rem; text-align: center; position: relative; }
.step-number {
  width: 5rem; height: 5rem; border-radius: 50%;
  background: var(--navy); border: 1px solid var(--navy-border);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--gold);
  position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--navy-mid);
}
.step h3 {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 400;
  color: var(--white); margin-bottom: 0.75rem;
}
.step p { font-size: 0.9rem; color: var(--muted-light); line-height: 1.7; }

/* DATENSCHUTZ */
.datenschutz { padding: 6rem 0; }
.datenschutz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.datenschutz-content { display: flex; flex-direction: column; gap: 1.5rem; }
.datenschutz-features { display: flex; flex-direction: column; gap: 1.25rem; }
.datenschutz-item { display: flex; gap: 1rem; align-items: flex-start; }
.datenschutz-icon {
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  padding: 0.5rem; background: var(--gold-dim); border-radius: var(--r-md); color: var(--gold);
}
.datenschutz-icon svg { width: 100%; height: 100%; }
.datenschutz-text h4 { font-weight: 600; color: var(--white); margin-bottom: 0.25rem; font-size: 0.95rem; }
.datenschutz-text p { font-size: 0.88rem; color: var(--muted-light); line-height: 1.65; }

.security-card {
  background: var(--navy-mid); border: 1px solid var(--navy-border);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card);
}
.security-header {
  display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, rgba(200,169,110,0.08) 0%, transparent 100%);
  border-bottom: 1px solid var(--navy-border); font-weight: 600; color: var(--gold); font-size: 0.95rem;
}
.security-header svg { width: 1.25rem; height: 1.25rem; }
.security-badges { padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.security-badge {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; background: rgba(255,255,255,0.02);
  border: 1px solid var(--navy-border); border-radius: var(--r-md);
}
.badge-label { font-size: 0.88rem; color: var(--muted-light); }
.badge-status {
  font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.65rem;
  border-radius: var(--r-full); letter-spacing: 0.03em;
}
.badge-status.active {
  background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(62,184,160,0.3);
}
.badge-status.inactive {
  background: rgba(200,169,110,0.1); color: var(--gold); border: 1px solid rgba(200,169,110,0.2);
}

/* VORTEILE */
.vorteile {
  padding: 6rem 0; background: var(--navy-mid);
  border-top: 1px solid var(--navy-border); border-bottom: 1px solid var(--navy-border);
}
.vorteile-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--navy-border);
  border: 1px solid var(--navy-border); border-radius: var(--r-xl); overflow: hidden; margin-top: 3rem;
}
.vorteil-item { background: var(--navy-mid); padding: 2.25rem; transition: background var(--transition); }
.vorteil-item:hover { background: var(--navy-light); }
.vorteil-number {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 300;
  color: var(--navy-border); line-height: 1; margin-bottom: 1.25rem; letter-spacing: -0.02em;
}
.vorteil-title {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 400;
  color: var(--white); margin-bottom: 0.65rem;
}
.vorteil-text { font-size: 0.88rem; color: var(--muted-light); line-height: 1.7; }

/* ZIELGRUPPEN */
.zielgruppen { padding: 6rem 0; }
.zielgruppen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.zielgruppe-card {
  background: var(--navy-mid); border: 1px solid var(--navy-border);
  border-radius: var(--r-xl); padding: 2rem; transition: all var(--transition);
  position: relative; overflow: hidden;
}
.zielgruppe-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.zielgruppe-card:hover { border-color: var(--gold); }
.zielgruppe-card:hover::after { transform: scaleX(1); }
.zielgruppe-card h3 {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 400;
  color: var(--white); margin-bottom: 0.75rem;
}
.zielgruppe-card p { font-size: 0.9rem; color: var(--muted-light); line-height: 1.7; }

/* USE CASES */
.use-cases {
  padding: 6rem 0; background: var(--navy-mid);
  border-top: 1px solid var(--navy-border); border-bottom: 1px solid var(--navy-border);
}
.use-cases-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--navy-border);
  border: 1px solid var(--navy-border); border-radius: var(--r-xl); overflow: hidden; margin-top: 3rem;
}
.use-case-card { background: var(--navy-mid); padding: 2.25rem; transition: background var(--transition); }
.use-case-card:hover { background: var(--navy-light); }
.use-case-card h3 {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 400;
  color: var(--white); margin-bottom: 0.65rem; display: flex; align-items: center; gap: 0.5rem;
}
.use-case-card h3::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold); flex-shrink: 0;
}
.use-case-card p { font-size: 0.9rem; color: var(--muted-light); line-height: 1.7; }

/* PILOTPARTNER */
.pilotpartner { padding: 6rem 0; }
.pilotpartner-card {
  background: linear-gradient(135deg, rgba(200,169,110,0.06) 0%, rgba(62,184,160,0.04) 100%);
  border: 1px solid rgba(200,169,110,0.2); border-radius: var(--r-2xl);
  padding: 4rem; text-align: center; position: relative; overflow: hidden;
}
.pilotpartner-title {
  font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400; color: var(--white); margin-bottom: 1rem;
}
.pilotpartner-text {
  font-size: 1.05rem; color: var(--muted-light); line-height: 1.75;
  max-width: 680px; margin: 0 auto 2rem;
}

/* DEMO CTA */
.demo-cta {
  padding: 6rem 0; background: var(--navy-mid);
  border-top: 1px solid var(--navy-border); border-bottom: 1px solid var(--navy-border);
}
.demo-cta-card { max-width: 760px; margin: 0 auto; }
.demo-cta-title {
  font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 400; color: var(--white); margin-bottom: 1rem; line-height: 1.2;
}
.demo-cta-text { font-size: 1.05rem; color: var(--muted-light); line-height: 1.75; margin-bottom: 2.5rem; }
.demo-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-label { font-size: 0.82rem; color: var(--muted-light); font-weight: 500; letter-spacing: 0.02em; }
.form-input, .form-textarea {
  background: var(--navy); border: 1px solid var(--navy-border); border-radius: var(--r-md);
  padding: 0.75rem 1rem; color: var(--white); font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition); width: 100%;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted); }
.form-input:focus, .form-textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,169,110,0.1);
}
.form-textarea { resize: vertical; min-height: 100px; }
.form-actions { margin-top: 0.5rem; }
.form-hint { font-size: 0.8rem; color: var(--muted); line-height: 1.5; margin-top: 0.75rem; }
.form-hint a { color: var(--gold); }

/* FAQ */
.faq { padding: 6rem 0; }
.faq-grid {
  display: flex; flex-direction: column; gap: 1px; background: var(--navy-border);
  border: 1px solid var(--navy-border); border-radius: var(--r-xl); overflow: hidden; margin-top: 3rem;
}
.faq-item { background: var(--navy-mid); transition: background var(--transition); }
.faq-item[open] { background: var(--navy-light); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 2rem; cursor: pointer; list-style: none;
  font-weight: 500; color: var(--white); font-size: 0.98rem; transition: color var(--transition);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--gold-light); }
.faq-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--gold); transition: transform var(--transition); }
details[open] .faq-icon { transform: rotate(180deg); }
.faq-answer { padding: 0 2rem 1.5rem; }
.faq-answer p { font-size: 0.92rem; color: var(--muted-light); line-height: 1.75; }
.faq-answer strong { color: var(--white); font-weight: 500; }
.faq-answer em { color: var(--gold); font-style: normal; }

/* FOOTER */
.footer { background: var(--navy-mid); border-top: 1px solid var(--navy-border); padding: 4rem 0 0; }
.footer-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gap); }
.footer-top {
  display: grid; grid-template-columns: 1.5fr 2fr; gap: 4rem;
  padding-bottom: 3rem; border-bottom: 1px solid var(--navy-border);
}
.footer-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-bottom: 1rem; }
.footer-logo .logo-text { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--white); }
.footer-tagline { font-size: 0.88rem; color: var(--muted); line-height: 1.65; margin-bottom: 1.5rem; }
.footer-contact { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-contact-link {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem;
  color: var(--muted-light); transition: color var(--transition);
}
.footer-contact-link:hover { color: var(--gold); }
.footer-contact-link .icon { width: 0.95em; height: 0.95em; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-links-title {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1rem;
}
.footer-links-list { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links-list a { font-size: 0.88rem; color: var(--muted-light); transition: color var(--transition); }
.footer-links-list a:hover { color: var(--white); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 0; gap: 1rem; flex-wrap: wrap;
}
.footer-copyright { font-size: 0.82rem; color: var(--muted); }
.footer-legal { display: flex; align-items: center; gap: 0.75rem; font-size: 0.82rem; }
.footer-legal a { color: var(--muted); transition: color var(--transition); }
.footer-legal a:hover { color: var(--white); }
.footer-legal .separator {
  /*
   * Improve contrast for separators in the footer. Previously used the
   * navy-border colour (#243550) on a dark background (~#111f35), which
   * resulted in a very low contrast ratio (~1.34:1). Switching to the
   * muted colour (#7a8ea8) elevates the contrast above 4.5:1 while
   * maintaining a subtle appearance consistent with the design.
   */
  color: var(--muted);
}

/* COOKIE BANNER */
.cookie-banner {
  position: fixed; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; max-width: 520px;
  background: var(--navy-light); border: 1px solid var(--navy-border);
  border-radius: var(--r-xl); padding: 1.5rem; box-shadow: var(--shadow-card); z-index: 200; display: none;
}
.cookie-banner.show { display: block; }
.cookie-title { font-weight: 600; color: var(--white); margin-bottom: 0.5rem; font-size: 0.95rem; }
.cookie-text { font-size: 0.85rem; color: var(--muted-light); line-height: 1.6; margin-bottom: 1.25rem; }
.cookie-text a { color: var(--gold); }
.cookie-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ANIMATIONS */
.animate-on-scroll {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
.hero-badge { animation: slideUp 0.6s ease 0.1s both; }
.hero-title { animation: slideUp 0.7s ease 0.2s both; }
.hero-subtitle { animation: slideUp 0.7s ease 0.3s both; }
.hero-cta { animation: slideUp 0.7s ease 0.4s both; }
.hero-trust { animation: slideUp 0.7s ease 0.5s both; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .hero-container { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { max-width: 500px; margin: 0 auto; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .datenschutz-grid { grid-template-columns: 1fr; gap: 3rem; }
  .vorteile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .navbar-menu, .navbar-actions { display: none; }
  .navbar-toggle { display: flex; }
  .problem-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .process-steps::before { display: none; }
  .step { padding: 0; }
  .zielgruppen-grid { grid-template-columns: 1fr; }
  .use-cases-grid { grid-template-columns: 1fr; }
  .vorteile-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .pilotpartner-card { padding: 2.5rem 1.5rem; }
  .floating-card { display: none; }
}
@media (max-width: 480px) {
  .footer-links { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}