/* ==========================================================================
   EINHEITLICHE STYLE.CSS (CuraSync + Alle Module)
   ========================================================================== */

/* 01. RESET & GLOBALS */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
html, body { width: 100%; overflow-x: hidden; }
body {
  font-family: var(--cs-font-family);
  background: var(--cs-gradient-page);
  color: var(--cs-text);
  line-height: 1.6;
  text-align: left;
}
h1, h2, h3, h4, p, li, summary, a, button, span, strong {
  overflow-wrap: break-word; word-break: normal; hyphens: auto;
}
img, video, canvas, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

/* 02. TYPOGRAFIE & BASIS-STILE */
html.cs-font-small { font-size: 13px; }
html.cs-font-medium { font-size: 15px; }
html.cs-font-large { font-size: 17px; }
html.cs-font-large .cs-hero-title { line-height: 1.06; letter-spacing: -0.01em; }
html.cs-font-small .cs-hero-title { line-height: 1.0; }

.cs-hero-title, .cs-section-title, .cs-feature-title, .cs-stat-value,
.cs-device-title, .cs-testimonial-name, .cs-faq-item summary,
.cs-footer-title, .cs-logo-chip strong, .cs-pricing-price {
  font-family: var(--cs-font-family-display);
}

.cs-hero-subtext, .cs-feature-text, .cs-cta-text, .cs-section-intro,
.cs-testimonial-role, .cs-trust-text, .cs-process-text, .cs-list,
.cs-faq-item p, .cs-footer-text, .cs-pricing-period, .cs-pricing-note {
  color: var(--cs-text-muted);
}
.cs-stat-label, .cs-device-list, .cs-logo-chip span, .cs-trust-badge, .cs-kpi-label {
  color: var(--cs-text-soft);
}

.cs-theme-toggle:hover, .cs-nav-toggle:hover, .cs-button:hover,
.cs-logo-chip:hover, .cs-feature-card:hover, .cs-process-step:hover,
.cs-audience-card:hover, .cs-testimonial-card:hover, .cs-trust-card:hover,
.cs-faq-item:hover { transform: translateY(-2px); }

.cs-footer-link:hover, .cs-footer-link:focus-visible, .cs-button:focus-visible,
.cs-nav-link:focus-visible, .cs-theme-toggle:focus-visible, .cs-nav-toggle:focus-visible {
  outline: 3px solid rgba(53, 199, 255, 0.32); outline-offset: 2px;
}

/* 03. LAYOUT & SECTIONS */
#cs-homepage {
  min-height: 100vh;
  display: flex; flex-direction: column;
  gap: var(--cs-space-4);
  padding: var(--cs-space-4) 0 var(--cs-space-6);
  padding-inline: var(--cs-container-gutter);
  max-width: 1301px; margin-inline: auto;
}
#cs-homepage.cs-homepage-hidden { display: none; }
#cs-homepage:not(.cs-homepage-hidden) { display: flex; }

.cs-header, .cs-main, .cs-footer, .cs-site-warning {
  width: min(100%, var(--cs-container-max)); margin-inline: auto;
}
.cs-main { display: grid; gap: var(--cs-space-7); }
.cs-main > *, .cs-footer > * { min-width: 0; }

.cs-site-warning, .cs-main > section:first-of-type, .cs-main > section:nth-of-type(2) {
  box-shadow: var(--cs-shadow-card); border-color: var(--cs-border-strong);
}

.cs-main > section:not(.cs-hero) {
  background: var(--cs-gradient-page), color-mix(in srgb, var(--cs-surface) 96%, var(--cs-surface-muted) 4%);
  background-size: cover; background-repeat: no-repeat; background-position: center; background-blend-mode: normal;
  border: 1px solid var(--cs-border); border-radius: calc(var(--cs-container-radius) - 0.15rem);
  box-shadow: var(--cs-shadow-soft); backdrop-filter: blur(8px);
}
.cs-main > section:not(.cs-hero):nth-of-type(2n) {
  background: var(--cs-gradient-page-alt), color-mix(in srgb, var(--cs-surface) 95%, var(--cs-surface-muted) 5%);
  background-size: cover; background-repeat: no-repeat; background-position: center;
}
.cs-main > section:not(.cs-hero):nth-of-type(3n) {
  background: var(--cs-gradient-page-soft), color-mix(in srgb, var(--cs-surface) 96%, var(--cs-surface-muted) 4%);
  background-size: cover; background-repeat: no-repeat; background-position: center;
}

.cs-section, .cs-hero, .cs-cta, .cs-pricing-card {
  position: relative; padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--cs-border); border-radius: var(--cs-container-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cs-surface) 96%, var(--cs-surface-muted) 4%), var(--cs-surface-strong));
  box-shadow: var(--cs-shadow-soft); backdrop-filter: blur(14px);
}
.cs-section-head { display: grid; gap: 0.9rem; margin-bottom: var(--cs-space-5); max-width: 100%; }
.cs-section-title {
  display: inline-block; font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.05; letter-spacing: -0.03em; white-space: normal; overflow-wrap: break-word; word-break: break-word;
}
.cs-section-intro { width: fit-content; white-space: normal; overflow-wrap: break-word; max-width: 60rem; }

/* 04. HEADER & NAVIGATION */
.cs-header {
  position: sticky; top: var(--cs-space-3); z-index: 50;
  display: grid; grid-template-columns: auto auto auto; align-items: center; gap: var(--cs-space-3);
  padding: 1rem 1.1rem;
  border: 1px solid var(--cs-header-border, var(--cs-border));
  border-radius: var(--cs-container-radius); box-shadow: var(--cs-shadow-soft);
  backdrop-filter: blur(20px); transition: background 0.3s ease, border-color 0.3s ease;
  background: var(--cs-header-bg, transparent) !important;
  color: var(--cs-header-color, var(--cs-text));
}

.page-curaoffice .cs-header, .page-curamobile .cs-header, .page-curaspeech .cs-header {
  background-size: 100vw 100vh !important; background-position: top center !important; background-attachment: fixed !important;
}

.cs-brand { display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--cs-space-3); text-decoration: none; min-width: 0; flex-shrink:0; }
.cs-brand-logo { height: 70px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)); }
.cs-header-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.7rem; min-width: 0; }

.cs-nav-toggle, .cs-theme-toggle, .cs-role-toggle, .cs-font-toggle {
  border: 1px solid var(--cs-border); background: color-mix(in srgb, var(--cs-surface-strong) 85%, transparent);
  color: var(--cs-text); border-radius: var(--cs-radius-pill); cursor: pointer; transition: all 0.25s ease;
}
.cs-nav-toggle { width: 2.85rem; height: 2.85rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.cs-theme-toggle, .cs-font-toggle { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.72rem 1rem; font-weight: 700; }
.cs-theme-toggle::before {
  content: ""; width: 0.85rem; height: 0.85rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--cs-brand-primary), var(--cs-action-primary)); box-shadow: 0 0 0 0.2rem rgba(12, 103, 255, 0.08);
}
.cs-font-toggle { gap: 0.45rem; padding: 0.6rem 0.9rem; }
.cs-font-icon { font-weight: 900; line-height: 1; display: inline-block; font-size: 1rem; }
.cs-font-label { font-size: 0.82rem; font-weight: 800; }

.cs-nav { display: none; grid-column: 1 / -1; gap: 0.7rem; padding-top: 0.3rem; flex-direction: column; min-width: 0; }
.cs-nav.open { display: flex; }
.cs-nav-link {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.9rem;
  color: var(--cs-header-color, var(--cs-text-muted)); text-decoration: none; font-weight: 700;
  border-radius: var(--cs-radius-pill); border: 1px solid transparent; transition: background 0.25s ease, color 0.25s ease; min-width: 0; text-align: center;
}
.cs-nav-link:hover, .cs-nav-link:focus-visible { color: var(--cs-text); background: color-mix(in srgb, var(--cs-surface-muted) 85%, transparent); }
.cs-nav-link[aria-current="page"] { color: var(--cs-text); background: color-mix(in srgb, var(--cs-brand-primary) 14%, var(--cs-surface-strong)); border-color: color-mix(in srgb, var(--cs-brand-primary) 20%, transparent); }

.page-curaoffice .cs-header .cs-nav-link, .page-curamobile .cs-header .cs-nav-link, .page-curaspeech .cs-header .cs-nav-link,
.page-curaoffice .cs-header .cs-theme-toggle, .page-curamobile .cs-header .cs-theme-toggle, .page-curaspeech .cs-header .cs-theme-toggle,
.page-curaoffice .cs-header .cs-font-toggle, .page-curamobile .cs-header .cs-font-toggle,
.page-curaoffice .cs-header .cs-nav-toggle, .page-curamobile .cs-header .cs-nav-toggle, .page-curaspeech .cs-header .cs-nav-toggle {
  color: var(--cs-header-color); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2);
}
.page-curaoffice .cs-header .cs-nav-link:hover, .page-curamobile .cs-header .cs-nav-link:hover, .page-curaspeech .cs-header .cs-nav-link:hover {
  background: rgba(255, 255, 255, 0.15); color: #fff;
}
.page-curaoffice .cs-header .cs-nav-link[aria-current="page"], .page-curamobile .cs-header .cs-nav-link[aria-current="page"], .page-curaspeech .cs-header .cs-nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); color: #fff;
}

/* 05. HERO SECTION */
.cs-hero {
  overflow: hidden; background: var(--cs-gradient-hero); position: relative; color: var(--cs-text);
  background-size: 100vw 100vh; background-position: top center; background-attachment: fixed;
}
.cs-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(2,34,60,0.18), rgba(2,34,60,0.06)); z-index: 0; }
.cs-hero::after { content: ""; position: absolute; inset: auto auto -7rem -5rem; width: 16rem; height: 16rem; border-radius: 50%; background: radial-gradient(circle, rgba(0, 74, 122, 0.06), transparent 62%); pointer-events: none; }
body[data-cs-theme="dark"] .cs-hero::before { background: linear-gradient(180deg, rgba(0,0,0,0.36), rgba(0,0,0,0.36)); }

.cs-hero-shell { position: relative; z-index: 1; display: grid; gap: var(--cs-space-5); align-items: start; }
.cs-hero-content { display: grid; gap: 1rem; max-width: 100%; min-width: 0; align-self: flex-start; }

.cs-hero-title { color: #ffffff; text-shadow: 0 6px 24px rgba(2,34,60,0.55); font-size: clamp(1.2rem, 2.2vw, 2.0rem); line-height: 1.02; letter-spacing: -0.02em; }
.cs-hero-text { color: rgba(255,255,255,0.92); text-shadow: 0 4px 18px rgba(2,34,60,0.45); font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; max-width: 100%; }
.cs-hero-subtext { color: var(--cs-text); font-size: clamp(0.95rem, 1.6vw, 1.05rem); max-width: 56rem; }
body[data-cs-theme="dark"] .cs-hero-subtext { color: rgba(255,255,255,0.92); text-shadow: 0 3px 12px rgba(2,34,60,0.36); }
.cs-hero-note { color: var(--cs-hero-accent); max-width: 32rem; }

body:not([data-cs-theme="dark"]) .cs-hero .cs-hero-text,
body:not([data-cs-theme="dark"]) .cs-hero .cs-hero-subtext,
body:not([data-cs-theme="dark"]) .cs-hero .cs-hero-note,
body:not([data-cs-theme="dark"]) .cs-hero .cs-proof-item,
body:not([data-cs-theme="dark"]) .cs-hero p { color: var(--cs-hero-accent); text-shadow: none; }
body:not([data-cs-theme="dark"]) .cs-hero .cs-proof-item { color: var(--cs-hero-accent-strong); border-color: rgba(229, 241, 250, 0.32); background: rgba(1, 40, 69, 0.28); }
body:not([data-cs-theme="dark"]) .cs-hero .cs-eyebrow,
body:not([data-cs-theme="dark"]) .cs-hero .cs-kicker { color: var(--cs-deep-navy); background: color-mix(in srgb, #ffffff 92%, transparent); border-color: rgba(2,34,60,0.06); }
body[data-cs-theme="dark"] .cs-hero .cs-eyebrow,
body[data-cs-theme="dark"] .cs-hero .cs-kicker { color: var(--cs-text); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }

.cs-hero-media { position: relative; display: grid; place-items: center; }

/* Bild-Anordnung Standard (Office & Speech): 1 Spalte, alles untereinander */
.cs-hero-shot-stack {
  width: min(100%, 34rem); display: grid; grid-template-columns: 1fr; gap: 1rem; justify-items: center; align-items: center;
}

/* Modul-Spezifisch: CuraMobile (2 Bilder oben, 1 Bild unten) */
.page-curamobile .cs-hero-shot-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-curamobile .cs-hero-shot--tertiary {
  grid-column: 1 / -1; width: 100%; max-width: 410px; justify-self: center; transform: scale(0.92);
}

/* Bildgrößen-Steuerung Standard Container */
.cs-hero-shot {
  position: relative; margin: 0 auto; overflow: hidden; width: max-content; justify-self: center;
  border-radius: 0.8rem; border: 1px solid color-mix(in srgb, var(--cs-border) 78%, transparent); background: transparent;
  box-shadow: 0 12px 24px -10px rgba(8, 22, 40, 0.4); transition: box-shadow 0.28s ease, transform 0.2s ease;
}

.cs-hero-shot img { 
  display: block; height: 120px; width: auto; object-fit: contain; cursor: zoom-in; 
}
.cs-hero-shot:hover { box-shadow: 0 20px 38px -12px rgba(8, 22, 40, 0.5); transform: translateY(-2px); }

/* Individuelle Bildsteuerung für CuraMobile */
.page-curamobile .cs-hero-shot--primary img {
  height: 300px; /* HIER ANPASSEN (Bild 1 - Startansicht) */
  width: auto;
}
.page-curamobile .cs-hero-shot--secondary img {
  height: 300px; /* HIER ANPASSEN (Bild 2 - Dokumentationsansicht) */
  width: auto;
}
.page-curamobile .cs-hero-shot--tertiary img {
  height: auto;  /* HIER ANPASSEN (Bild 3 - Praxisansicht) */
  width: 100%;
}

body[data-cs-theme="dark"] .cs-hero-shot { border-color: rgba(176, 204, 232, 0.2); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5); }

/* Disclaimer */
.cs-hero-disclaimer {
  grid-column: 1 / -1; font-size: 0.85rem; color: #000000 !important; font-weight: 500; text-align: center;
  margin-top: 0.5rem; background: transparent !important; padding: 6px 12px; width: 100%;
}

.cs-contact-hero .cs-hero-content { max-width: 62rem; width: min(100%, 62rem); }
.cs-contact-hero .cs-hero-text { max-width: 62rem; width: min(100%, 62rem); hyphens: none; }

/* 06. DEVICE MOCKUPS */
.cs-device-orb { position: absolute; border-radius: 50%; filter: blur(10px); }
.cs-device-orb--one { inset: 5% auto auto 10%; width: 9rem; height: 9rem; background: rgba(0, 120, 180, 0.22); }
.cs-device-orb--two { inset: auto 6% 10% auto; width: 11rem; height: 11rem; background: rgba(0, 120, 180, 0.06); }

/* 07. UI KOMPONENTEN */
.cs-hero-actions, .cs-cta-actions, .cs-proof-list, .cs-logo-row, .cs-trust-badges { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.cs-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 3.2rem; padding: 0.85rem 1.3rem; text-decoration: none;
  border-radius: var(--cs-radius-pill); border: 1px solid transparent; font-weight: 800; transition: all 0.25s ease; text-align: center;
}
.cs-button-primary { background: var(--cs-gradient-cta); color: var(--cs-deep-navy); box-shadow: 0 12px 28px rgba(0, 42, 78, 0.12); }
.cs-button-accent { background: color-mix(in srgb, var(--cs-brand-primary) 10%, var(--cs-surface-strong)); color: var(--cs-brand-primary); border-color: color-mix(in srgb, var(--cs-brand-primary) 18%, transparent); }

.cs-eyebrow, .cs-kicker {
  display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content; padding: 0.45rem 0.85rem; border-radius: var(--cs-radius-pill);
  border: 1px solid var(--cs-border); background: color-mix(in srgb, var(--cs-surface-strong) 80%, transparent); color: var(--cs-brand-primary);
  font-size: 0.85rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}

.cs-proof-list {
  display: grid !important;
  grid-template-columns: 1fr; /* Sorgt für exakt 1 Spalte */
  grid-auto-rows: 1fr; /* (Der Trick von vorhin: Hält alle Blasen gleich hoch) */
  gap: 0.85rem;
}

.cs-proof-item {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 0.9rem; border-radius: var(--cs-radius-card);
  background: color-mix(in srgb, var(--cs-surface-strong) 84%, transparent); border: 1px solid var(--cs-border); color: var(--cs-text-muted); font-weight: 700; min-width: 0;
}

.cs-proof-item::before, .cs-list li::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: linear-gradient(135deg, var(--cs-navy-mid), var(--cs-deep-navy)); flex: 0 0 auto;
}

.cs-feature-card, .cs-process-step, .cs-audience-card, .cs-testimonial-card, .cs-trust-card, .cs-service-card {
  padding: 1.2rem; border-radius: var(--cs-radius-card); border: 1px solid color-mix(in srgb, var(--cs-border) 85%, var(--cs-deep-navy) 6%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cs-surface) 94%, var(--cs-surface-muted) 6%), var(--cs-surface-strong));
  box-shadow: var(--cs-shadow-soft); transition: all 0.25s ease;
}
.cs-service-card { display: grid; gap: 1rem; min-height: 11rem; text-decoration: none; color: inherit; }
.cs-service-card:hover, .cs-service-card:focus-visible { transform: translateY(-0.15rem); border-color: color-mix(in srgb, var(--cs-brand-primary) 55%, transparent); }
.cs-service-card--curaoffice { background: linear-gradient(135deg, #2b6b5f 0%, #4fb8a0 55%, #cdf2e2 100%); border-color: rgba(96, 133, 69, 0.35); color: #f7fbf5; }
.cs-service-card--curamobile { background: var(--cs-gradient-hero); color: #f7fbf5; }
.cs-service-card--curaspeech { background: linear-gradient(135deg, #52151b 0%, #7d252d 52%, #a73742 100%); color: #fff; }
.cs-service-stack { display: grid; gap: var(--cs-space-5); padding: var(--cs-space-4) 0; }
.cs-service-card-head { display: grid; gap: 0.5rem; }
.cs-service-title { margin: 0; font-size: clamp(2rem, 2.3vw, 2.6rem); line-height: 1.05; }
.cs-service-subtitle { margin: 0; color: #ffffff; font-size: 1.05rem; line-height: 1.7; }

.cs-pricing-card { display: grid; gap: 1.2rem; }
.cs-pricing-card__head { display: grid; gap: 0.6rem; }
.cs-pricing-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.cs-pricing-item { display: grid; gap: 0.35rem; padding: 1.15rem 1.2rem; border: 1px solid var(--cs-border); border-radius: 1rem; background: color-mix(in srgb, var(--cs-surface) 90%, var(--cs-surface-muted) 10%); }
.cs-pricing-item--featured { border-color: color-mix(in srgb, var(--cs-brand-primary) 42%, var(--cs-border)); background: linear-gradient(135deg, rgba(53, 199, 255, 0.15), rgba(53, 199, 255, 0.05)); }
.cs-pricing-name { font-size: 1.02rem; font-weight: 700; color: var(--cs-text); }
.cs-pricing-price { font-size: 1.85rem; font-weight: 800; line-height: 1.05; color: var(--cs-brand-primary); }

.cs-site-warning {
  padding: 0.95rem 1.15rem; border-radius: var(--cs-radius-card); border: 1px solid rgba(255, 212, 91, 0.45);
  background: color-mix(in srgb, var(--cs-warning) 26%, var(--cs-surface-strong)); color: color-mix(in srgb, var(--cs-text) 88%, #5d4100); font-weight: 700;
}

/* 09. FOOTER & PRIVACY */
.cs-footer {
  margin-top: auto; padding: var(--cs-space-5); display: grid; gap: 0.55rem;
  background: var(--cs-header-bg, transparent) !important;
  color: var(--cs-header-color, var(--cs-text)) !important;
  border: 1px solid var(--cs-header-border, var(--cs-border)); border-radius: var(--cs-container-radius);
  box-shadow: var(--cs-shadow-soft); text-align: center;
}
.page-curaoffice .cs-footer .cs-footer-text, .page-curamobile .cs-footer .cs-footer-text, .page-curaspeech .cs-footer .cs-footer-text,
.page-curaoffice .cs-footer .cs-footer-link, .page-curamobile .cs-footer .cs-footer-link, .page-curaspeech .cs-footer .cs-footer-link {
  color: rgba(255, 255, 255, 0.9);
}
.cs-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.cs-footer-meta { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.cs-footer-icon { width: clamp(44px, 7vw, 88px); margin-bottom: 0.25rem; opacity: 0.98; }
.cs-footer-link { font-weight: 700; text-decoration: none; }
.cs-footer-link:hover { text-decoration: underline; }

.cs-privacy-page { padding: 1rem 0 2rem; }
.cs-privacy-shell { max-width: 48rem; margin: 0 auto; padding: 2rem; border: 1px solid var(--cs-border); border-radius: var(--cs-container-radius); background: color-mix(in srgb, var(--cs-surface-strong) 90%, transparent); box-shadow: var(--cs-shadow-card); }
.cs-privacy-shell h2 { margin-top: 1.2rem; font-size: 1.05rem; }
.cs-privacy-shell p, .cs-privacy-shell li { margin-bottom: 0.6rem; color: var(--cs-text-muted); }
.cs-privacy-shell ul { padding-left: 1rem; }

/* 10. MODALS (Lightbox) */
.cs-lightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); z-index: 9999; justify-content: center; align-items: center; padding: 20px; backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.25s ease; }
.cs-lightbox.active { display: flex; opacity: 1; }
.cs-lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transform: scale(0.95); transition: transform 0.25s ease; }
.cs-lightbox.active .cs-lightbox-img { transform: scale(1); }
.cs-lightbox-close { position: absolute; top: 20px; right: 25px; color: #ffffff; font-size: 36px; cursor: pointer; background: none; border: none; }

/* 13. MEDIA QUERIES */
@media (min-width: 48rem) {
  #cs-homepage { padding-top: var(--cs-space-5); }
  .cs-header { grid-template-columns: auto 1fr auto; padding: 1rem 1.25rem; }
  .cs-nav { display: flex; grid-column: auto; flex-direction: row; align-items: center; justify-content: center; padding-top: 0; }
  .cs-nav-toggle { display: none; }
  .cs-feature-row, .cs-cta-inner { grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr); align-items: center; }
  
  /* Hero Shell bekommt exakt 70% (7fr) und 30% (3fr): */
  .cs-hero-shell { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: center; }
  .cs-process-grid, .cs-testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 70rem) {
  .cs-hero, .cs-section, .cs-cta { padding: 2.35rem; }
  .cs-process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
  #cs-homepage { padding-top: 0.85rem; padding-bottom: var(--cs-space-5); }
  .cs-main { gap: var(--cs-space-5); }
  .cs-site-warning, .cs-hero, .cs-section, .cs-cta, .cs-footer { padding-left: 1rem; padding-right: 1rem; }
  .cs-section-head { margin-bottom: var(--cs-space-4); }
  .cs-hero-title { font-size: clamp(2.2rem, 11vw, 3.35rem); max-width: 100%; }
  .cs-hero-text { font-size: 1rem; }
  .cs-section-title { font-size: clamp(1.65rem, 8vw, 2.35rem); }
  .cs-header { top: 0.65rem; gap: 0.65rem; padding: 0.8rem 0.85rem; grid-template-columns: minmax(0, 1fr) auto auto; }
  .cs-brand-logo { height: auto; max-height: 48px; }
  .cs-nav { gap: 0.45rem; padding-top: 0.5rem; }
  .cs-nav-link { width: 100%; justify-content: center; }
  .cs-hero-shell { gap: var(--cs-space-4); }
  .cs-button { width: 100%; }
  .page-curaoffice .cs-proof-item,
  .page-curamobile .cs-proof-item,
  .page-curaspeech .cs-proof-item { border-radius: var(--cs-radius-card); }
  
  /* Auf Mobilgeräten bleibt Mobile auf 2 Spalten, andere auf 1 Spalte */
  .cs-hero-shot-stack { width: min(100%, 20rem); grid-template-columns: 1fr; gap: 0.8rem; }
  .page-curamobile .cs-hero-shot-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .page-curamobile .cs-hero-shot--tertiary { transform: none; }
}
@media (max-width: 29.99rem) {
  .cs-hero-title { font-size: clamp(2rem, 12vw, 2.85rem); }
}

/* ==========================================================================
   MODULE THEMES (CSS VARIABLES)
   ========================================================================== */

/* THEME: CURAOFFICE */
body.page-curaoffice {
  --cs-header-bg: linear-gradient(135deg, #2b6b5f 0%, #3d8b77 55%, #7bc4b2 100%);
  --cs-header-color: #ffffff;
  --cs-header-border: rgba(255, 255, 255, 0.15);
  
  --cs-deep-navy: #1b3a25;
  --cs-navy-mid: #2b6b5f;
  --cs-brand-primary: #2b6b5f;
  --cs-brand-accent: #3d8b77;
  --cs-action-primary: #7bc4b2;
  --cs-action-soft: #e8f5f1;
  --cs-hero-accent: #d8e8d0;
  --cs-hero-accent-strong: #c8dfbe;
  --cs-bg: #edf2f7;
  --cs-surface: rgba(255, 255, 255, 0.94);
  --cs-surface-strong: #ffffff;
  --cs-surface-muted: #f6fbf3;
  --cs-text: #1b3a25;
  --cs-text-muted: #3d8b77;
  
  --cs-gradient-page: linear-gradient(180deg, #f0f7f4 0%, #e8f5f1 52%, #f0f7f4 100%);
  --cs-gradient-page-alt: linear-gradient(180deg, #f6fbf3 0%, #eef6e9 52%, #f3faef 100%);
  --cs-gradient-page-soft: linear-gradient(180deg, #fafdf9 0%, #f6fbf3 56%, #f8fcf6 100%);
  --cs-gradient-hero: linear-gradient(135deg, #2b6b5f 0%, #4fb8a0 55%, #cdf2e2 100%);
  --cs-gradient-cta: linear-gradient(180deg, #a5dcb9 0%, #7bc4b2 100%);
}

/* THEME: CURAMOBILE */
body.page-curamobile {
  --cs-header-bg: var(--cs-gradient-hero);
  --cs-header-color: #ffffff;
  --cs-header-border: rgba(255, 255, 255, 0.15);
}

/* THEME: CURASPEECH */
body.page-curaspeech {
  --cs-header-bg: linear-gradient(135deg, #52151b 0%, #7d252d 52%, #a73742 100%);
  --cs-header-color: #ffffff;
  --cs-header-border: rgba(255, 255, 255, 0.15);
  
  --cs-deep-navy: #471318;
  --cs-navy-mid: #7d252d;
  --cs-cyan: #b8414d;
  --cs-cyan-bright: #ff8d78;
  --cs-brand-primary: #7d252d;
  --cs-brand-accent: #b8414d;
  --cs-action-primary: #ff8d78;
  --cs-action-soft: #fff1ed;
  --cs-hero-accent: #f6ddd8;
  --cs-hero-accent-strong: #fff0ec;
  --cs-bg: #fff7f5;
  --cs-surface: rgba(255, 250, 249, 0.94);
  --cs-surface-strong: #ffffff;
  --cs-surface-muted: #fff0ec;
  --cs-text: #431116;
  --cs-text-muted: #785457;
  
  --cs-gradient-page: radial-gradient(circle at 12% 18%, rgba(184, 65, 77, 0.12), transparent 28%), linear-gradient(180deg, #fffaf8 0%, #fff4f1 52%, #fff8f6 100%);
  --cs-gradient-page-alt: radial-gradient(circle at 84% 14%, rgba(255, 141, 120, 0.14), transparent 24%), linear-gradient(180deg, #fff9f7 0%, #fff2ef 52%, #fff6f4 100%);
  --cs-gradient-page-soft: radial-gradient(circle at 52% 2%, rgba(184, 65, 77, 0.08), transparent 30%), linear-gradient(180deg, #fffaf8 0%, #fff3f0 56%, #fff7f4 100%);
  --cs-gradient-hero: linear-gradient(135deg, #52151b 0%, #7d252d 52%, #a73742 100%);
  --cs-gradient-cta: linear-gradient(180deg, #ff9c82 0%, #ff7468 100%);
}

body.page-curaspeech[data-cs-theme="dark"] {
  --cs-deep-navy: #24080b; --cs-navy-mid: #551219; --cs-cyan: #982633; --cs-cyan-bright: #ff8d78;
  --cs-brand-primary: #ffd7d1; --cs-brand-accent: #ff8f85; --cs-action-primary: #ff8d78; --cs-action-soft: #3c1116;
  --cs-hero-accent: #f7cbc4; --cs-hero-accent-strong: #ffe4df;
  --cs-bg: #140609; --cs-surface: rgba(40, 11, 16, 0.88); --cs-surface-strong: #21090d; --cs-surface-muted: #341016;
  --cs-text: #fff1ee; --cs-text-muted: #efc9c4; --cs-text-soft: #d7aaa6;
  --cs-border: rgba(255, 220, 216, 0.12); --cs-border-strong: rgba(255, 220, 216, 0.22);
  --cs-gradient-page: linear-gradient(180deg, #17070a 0%, #120507 52%, #1b090d 100%);
  --cs-gradient-hero: linear-gradient(135deg, #22090d 0%, #4a1219 52%, #721b25 100%);
}

/* 1. Ausrichtung nach oben anstatt zentriert (sauberer bei mehrzeiligem Text) */
.cs-proof-item {
  align-items: flex-start !important;
  text-align: left;
}

/* 2. Den runden Aufzählungspunkt optisch an die erste Textzeile anpassen */
.cs-proof-item::before {
  margin-top: 0.45rem; 
}

/* 3. Dem fetten Titel eine feste Breite geben, damit der Rest bündig startet */
.cs-proof-item strong {
  flex: 0 0 9.5rem; /* Feste Breite der linken Spalte (ca. 140px) */
  padding-right: 0.5rem;
}

/* Optional: Auf ganz schmalen Handys die linke Spalte prozentual machen, 
   damit es nicht zu eng wird */
@media (max-width: 29.99rem) {
  .cs-proof-item strong {
    flex: 0 0 45%; 
  }
}

/* Nur für die mobile Ansicht: Vertikal zentrieren */
@media (max-width: 47.99rem) {
  .cs-proof-item {
    align-items: center !important;
  }
  
  /* Den Aufzählungspunkt ebenfalls wieder exakt in die Mitte setzen */
  .cs-proof-item::before {
    margin-top: 0 !important;
  }
}

.cs-site-consent-card {
  max-width: 1300px; /* Passe diesen Wert nach Wunsch an (z. B. 450px) */
  width: 90%;       /* Verhindert ein Überstehen auf Smartphones */
  margin: 0 auto;
}