.elementor-kit-3199{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#27AEE1;--e-global-color-4e5f48e:#FFF;--e-global-color-5030ed4f:#000000;--e-global-color-7ea8107f:RGBA(163, 169, 174, 0.25);--e-global-color-7cacfd74:#A6ABB0;--e-global-color-4a7e13bb:#5D6165;--e-global-color-802c356:#D3D5D7;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#FFFFFF;}.elementor-kit-3199 button:hover,.elementor-kit-3199 button:focus,.elementor-kit-3199 input[type="button"]:hover,.elementor-kit-3199 input[type="button"]:focus,.elementor-kit-3199 input[type="submit"]:hover,.elementor-kit-3199 input[type="submit"]:focus,.elementor-kit-3199 .elementor-button:hover,.elementor-kit-3199 .elementor-button:focus{background-color:#27AEE1;}.elementor-kit-3199 e-page-transition{background-color:#FFBC7D00;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:991px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:777px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   A4A – GLOBAL + HERO + HEADER + WHY + BENEFITS-HERO + BENEFITS + VORTEILE
   + DARK/LIGHT + TOGGLE
   ========================================================================== */

/* -----------------------------
   GLOBAL BASIS
   ----------------------------- */

body {
  background: #ffffff;
  color: #111827;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background 0.4s ease, color 0.4s ease;
}

body.a4a-dark {
  background: #020617;
  color: #F9FAFB;
}

/* ========================================================================== */
/* HERO-SECTION (OBEN)                                                        */
/* ========================================================================== */

.a4a-hero.a4a-theme-section {
  position: relative;
  padding-top: 60px !important;
  padding-bottom: 80px !important;
  width: 100% !important;
  display: block;
  color: #111827 !important;
  background: transparent !important;
  overflow: visible;
}

/* Hero-Verlauf vollbreit (Light) */
.a4a-hero.a4a-theme-section::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(180deg, #F5FBFF 0%, #F1F5F9 100%);
  z-index: -1;
}

/* Hero-Verlauf vollbreit (Dark) */
body.a4a-dark .a4a-hero.a4a-theme-section::before {
  background: linear-gradient(180deg, #020617 0%, #0B1120 100%);
}

/* Eyebrow / Kicker */
.a4a-eyebrow .elementor-heading-title {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #27AEE1 !important;
}

/* Große Headline (Hero & Benefits-Hero) */
.a4a-heading .elementor-heading-title {
  font-size: 38px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #111827 !important;
}

/* Subtext */
.a4a-subtext,
.a4a-subtext p,
.a4a-subtext li {
  font-size: 14px !important;
  color: #4B5563 !important;
  line-height: 1.6 !important;
}

/* Bullet-Icons */
.a4a-hero .elementor-icon-list-icon i {
  background: rgba(39, 174, 225, 0.12) !important;
  color: #27AEE1 !important;
  border-radius: 999px;
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================================================== */
/* BUTTONS                                                                    */
/* ========================================================================== */

.a4a-hero-cta-primary .elementor-button {
  background-color: #27AEE1 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: 0 10px 20px rgba(39, 174, 225, 0.35) !important;
}

.a4a-hero-cta-primary .elementor-button:hover {
  background-color: #1995c4 !important;
}

.a4a-hero-cta-secondary .elementor-button {
  background: transparent !important;
  color: #54595F !important;
  border-radius: 999px !important;
  border: 1px solid #54595F !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.a4a-hero-cta-secondary .elementor-button:hover {
  background-color: #F9FAFB !important;
}

/* ========================================================================== */
/* VISUAL WRAPPER & KPIs (HERO-BILD)                                          */
/* ========================================================================== */

.a4a-hero-visual-wrapper {
  background: #ffffff !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.a4a-hero-visual-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.a4a-kpi-box {
  background: #ffffff !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 12px 8px !important;
}

.a4a-kpi-top,
.a4a-kpi-bottom {
  font-size: 11px !important;
  color: #6B7280 !important;
}

.a4a-kpi-value {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

/* ========================================================================== */
/* HEADER – OUTER (FULL WIDTH) + INNER (BOXED)                                */
/* ========================================================================== */

.a4a-header-outer {
  position: sticky;
  top: 0;
  z-index: 9999;
}

.a4a-header-outer::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(224, 244, 255, 0.98)
    );
  border-bottom: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  z-index: -1;
}

body.a4a-dark .a4a-header-outer::before {
  background: radial-gradient(circle at top left, #1f2937, #020617);
  border-bottom-color: rgba(30, 64, 175, 0.6);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}

.a4a-header {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  background: transparent !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* NAVIGATION */
.a4a-main-nav .elementor-item {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #4B5563 !important;
}

.a4a-main-nav .elementor-item:hover,
.a4a-main-nav .elementor-item.elementor-item-active {
  color: #27AEE1 !important;
}

body.a4a-dark .a4a-main-nav .elementor-item {
  color: #E5E7EB !important;
}

body.a4a-dark .a4a-main-nav .elementor-item:hover {
  color: #27AEE1 !important;
}

/* ========================================================================== */
/* WHY-SECTION                                                                */
/* ========================================================================== */

.a4a-why.a4a-theme-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.a4a-why-card {
  position: relative;
  background: radial-gradient(circle at top left, #ffffff, #e5f3fb);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 10px 16px !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease,
    background 0.25s ease;
  display: flex;
  gap: 16px;
  align-items: center;
}

.a4a-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  border-color: rgba(39, 174, 225, 0.7);
}

.a4a-why-card img {
  width: 190px;
  height: 120px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

.a4a-why-card .elementor-heading-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin-bottom: 6px;
}

.a4a-why-card,
.a4a-why-card p {
  font-size: 14px !important;
  color: #4b5563 !important;
}

/* WHY Dark */
body.a4a-dark .a4a-why-card {
  background: radial-gradient(circle at top left, #111827, #020617);
  border-color: rgba(55, 65, 81, 0.9);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
}

body.a4a-dark .a4a-why-card:hover {
  border-color: rgba(39, 174, 225, 0.8);
}

body.a4a-dark .a4a-why-card .elementor-heading-title {
  color: #f9fafb !important;
}

body.a4a-dark .a4a-why-card,
body.a4a-dark .a4a-why-card p {
  color: #d1d5db !important;
}

/* ========================================================================== */
/* BENEFITS-HERO (eigene Sektion, statisch)                                   */
/* ========================================================================== */

.a4a-benefits-hero.a4a-theme-section {
  padding-top: 60px !important;
  padding-bottom: 40px !important;
}

/* nutzt dieselben Klassen: a4a-eyebrow, a4a-heading, a4a-subtext, a4a-hero-visual-wrapper */

/* ========================================================================== */
/* BENEFITS-SECTION – LISTE + DYNAMISCHES BILD                                */
/* ========================================================================== */

.a4a-benefits.a4a-theme-section {
  padding-top: 40px !important;
  padding-bottom: 32px !important;
  background: transparent !important;
}

/* Layout: Liste links, Bild rechts */
.a4a-benefits-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.a4a-benefits-list {
  flex: 1 1 55%;
}

/* Rechte Seite: Bildcontainer mit <img>, dynamisch */
.a4a-benefits-visual {
  flex: 1 1 45%;
  border-radius: 16px;
  background-color: transparent;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  position: relative;
}

.a4a-benefits-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Überschrift + Einleitung oben in der Sektion (falls genutzt) */
.a4a-benefits-heading .elementor-heading-title {
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
}

.a4a-benefits-intro,
.a4a-benefits-intro p {
  font-size: 14px !important;
  color: #4b5563 !important;
  line-height: 1.7 !important;
}

/* ---------------- Akkordeon-Liste (Titel-Zustand) ----------------- */

.a4a-benefit-card {
  position: relative;
  padding: 4px 26px 4px 0;
  margin: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  display: block;
}

.a4a-benefit-card:last-child {
  border-bottom: none;
}

/* Plus/Minus rechts */
.a4a-benefit-card::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* kleine Titel in der Liste */
.a4a-benefit-card .elementor-heading-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

/* Bodytext (nur sichtbar wenn geöffnet) */
.a4a-benefit-text,
.a4a-benefit-text p {
  font-size: 14px !important;
  color: #4b5563 !important;
  line-height: 1.6 !important;
}

/* Bilder *in* den Cards ausgeblendet */
.a4a-benefits .a4a-benefit-card .elementor-widget-image,
.a4a-benefits .a4a-benefit-card img {
  display: none !important;
}

/* Card-Layout flachziehen, damit keine „unsichtbare Spalte“ bleibt */
.a4a-benefit-card .elementor-container,
.a4a-benefit-card .elementor-row,
.a4a-benefit-card .e-con-inner {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Inhalte außer der Überschrift im geschlossenen Zustand ausblenden */
.a4a-benefit-card:not(.is-open)
  .elementor-widget:not(.elementor-widget-heading) {
  display: none !important;
}

/* ---------------- Geöffnete Card ----------------- */

.a4a-benefit-card.is-open {
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 10px 16px 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: radial-gradient(circle at top left, #ffffff, #e5f3fb);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
  display: block;
}

.a4a-benefit-card.is-open .elementor-heading-title {
  font-size: 20px !important;
  font-weight: 600 !important;
}

.a4a-benefit-card.is-open::after {
  content: "–";
  top: 10px;
  transform: none;
  font-size: 18px;
}

/* BENEFITS Dark Mode */

body.a4a-dark .a4a-benefits-heading .elementor-heading-title {
  color: #f9fafb !important;
}

body.a4a-dark .a4a-benefits-intro,
body.a4a-dark .a4a-benefits-intro p {
  color: #e5e7eb !important;
}

body.a4a-dark .a4a-benefit-card {
  border-bottom-color: rgba(55, 65, 81, 0.9);
}

body.a4a-dark .a4a-benefit-card .elementor-heading-title {
  color: #e5f3ff !important;
}

body.a4a-dark .a4a-benefit-text,
body.a4a-dark .a4a-benefit-text p {
  color: #d1d5db !important;
}

body.a4a-dark .a4a-benefit-card.is-open {
  background: radial-gradient(circle at top left, #111827, #020617);
  border-color: rgba(55, 65, 81, 0.9);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
}

/* ========================================================================== */
/* VORTEILE-SEKTION (Cards 3-spaltig, CSS-GRID)                               */
/* ========================================================================== */

/* Abstand zur Benefits-Sektion */
.a4a-advantages-section {
  margin-top: 64px;
  margin-bottom: 96px;
}

/* Überschrift der Sektion – blauer Akzent */
.a4a-advantages-section .elementor-widget-heading .elementor-heading-title {
  font-size: 32px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;
  color: #27AEE1 !important;
}

/* Intro-Text unter der Überschrift */
.a4a-advantages-section .elementor-widget-text-editor {
  max-width: 720px;
  font-size: 14px !important;
  color: #4b5563 !important;
  line-height: 1.7 !important;
}

body.a4a-dark .a4a-advantages-section .elementor-widget-text-editor {
  color: #cbd5f5 !important;
}

/* --- GRID-Layout: 3 Spalten Desktop, 2 Tablet, 1 Mobile --- */

.a4a-advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Card-Basis */

.a4a-advantage-card {
  border-radius: 24px;
  padding: 20px 20px 22px;
  background: radial-gradient(circle at top left, #f5fbff 0%, #ffffff 50%, #f3f4f6 100%);
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Dark-Modus für Cards */
body.a4a-dark .a4a-advantage-card {
  background: radial-gradient(circle at top left, #020617 0%, #020617 40%, #020617 100%);
  border-color: rgba(148, 163, 184, 0.45);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.85);
}

/* Card-Inhalte */

.a4a-advantage-card .elementor-widget-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  display: block;
  margin-bottom: 14px;
}

.a4a-advantage-card .elementor-widget-heading .elementor-heading-title {
  font-size: 18px !important;
  line-height: 1.35 !important;
  margin-bottom: 4px !important;
  color: #111827 !important;
}

body.a4a-dark .a4a-advantage-card .elementor-widget-heading .elementor-heading-title {
  color: #e5f4ff !important;
}

.a4a-advantage-card .elementor-widget-text-editor {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #4b5563 !important;
}

body.a4a-dark .a4a-advantage-card .elementor-widget-text-editor {
  color: #cbd5f5 !important;
}

/* Responsive für Vorteile-Cards */

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

@media (max-width: 767px) {
  .a4a-advantages-grid {
    grid-template-columns: 1fr;
  }

  .a4a-advantages-section {
    margin-top: 48px;
    margin-bottom: 64px;
  }
}

/* ========================================================================== */
/* DARK MODE – HERO TYPO & KPIs                                               */
/* ========================================================================== */

body.a4a-dark .a4a-heading .elementor-heading-title {
  color: #F9FAFB !important;
}

body.a4a-dark .a4a-subtext,
body.a4a-dark .a4a-subtext p,
body.a4a-dark .a4a-subtext li {
  color: #E5E7EB !important;
}

body.a4a-dark .elementor-icon-list-text {
  color: #E5E7EB !important;
}

body.a4a-dark .a4a-hero .elementor-icon-list-icon i {
  background: rgba(39, 174, 225, 0.18) !important;
}

body.a4a-dark .a4a-hero-cta-primary .elementor-button {
  background-color: #27AEE1 !important;
  color: #0B1120 !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45) !important;
}

body.a4a-dark .a4a-hero-cta-secondary .elementor-button {
  color: #E5E7EB !important;
  border-color: #E5E7EB !important;
}

body.a4a-dark .a4a-hero-cta-secondary .elementor-button:hover {
  background: #0f172a !important;
}

body.a4a-dark .a4a-hero-visual-wrapper {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: #1f2937 !important;
}

body.a4a-dark .a4a-kpi-box {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: #1f2937 !important;
}

body.a4a-dark .a4a-kpi-top,
body.a4a-dark .a4a-kpi-bottom {
  color: #9CA3AF !important;
}

body.a4a-dark .a4a-kpi-value {
  color: #F9FAFB !important;
}

/* ========================================================================== */
/* TOGGLE                                                                    */
/* ========================================================================== */

.a4a-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.a4a-toggle {
  width: 56px;
  height: 32px;
  border-radius: 999px;
  padding: 3px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  display: inline-flex;
  align-items: center;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.a4a-toggle-knob {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.4);
  transform: translateX(0);
  transition: transform 0.3s ease, background 0.3s ease;
}

/* Icon im Knopf */
body:not(.a4a-dark) .a4a-toggle-knob::before {
  content: "🌞";
}

body.a4a-dark .a4a-toggle-knob::before {
  content: "🌙";
}

/* Dark-Mode Toggle-Zustand */
body.a4a-dark .a4a-toggle {
  background: #020617;
  border-color: #4b5563;
}

body.a4a-dark .a4a-toggle-knob {
  transform: translateX(24px);
  background: #e5e7eb;
}

/* Hover Glow */
.a4a-toggle:hover {
  box-shadow: 0 0 0 3px rgba(39, 174, 225, 0.25);
}

/* ===============================
   OVERRIDE: Vorteile-Karten breiter machen
   =============================== */

/* Grid-Layout für die 3 Vorteile-Karten */
.a4a-advantages-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  /* 3 Spalten, jede mind. 320px breit */
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap: 3rem;
}

/* Auf Tablets: 2 Spalten */
@media (max-width: 1024px) {
  .a4a-advantages-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

/* Auf Handy: 1 Spalte untereinander */
@media (max-width: 768px) {
  .a4a-advantages-grid {
    grid-template-columns: 1fr;
  }
}

/* Karten selbst sollen die volle Spaltenbreite nutzen */
.a4a-advantage-card {
  width: 100%;
  max-width: none !important;  /* falls irgendwo noch ein max-width hängt */
}

/* =========================================================
   ROI-RECHNER SEKTION – LAYOUT & LOOK
   ========================================================= */

.a4a-roi-calc-section {
  position: relative;
  padding: 70px 0 80px;
  border-radius: 32px;
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(110, 193, 228, 0.18), transparent),
    radial-gradient(130% 140% at 100% 0%, rgba(39, 174, 225, 0.18), transparent),
    #f5fbff;
}

/* Hauptlayout: links Formular, rechts Ergebnisse */

.a4a-roi-calc {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .a4a-roi-calc {
    grid-template-columns: 1fr;
  }
}

/* Linke Seite – Formular */

.a4a-roi-calc__left {
  padding: 24px 26px 26px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(148, 163, 184, 0.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.a4a-roi-calc__head {
  margin-bottom: 2px;
}

.a4a-roi-calc__title {
  font-size: clamp(1.5rem, 1.9vw, 2rem);
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.5rem;
}

.a4a-roi-calc__sub {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #4b5563;
}

/* Paketwahl */

.a4a-roi-packages {
  margin: 6px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.a4a-roi-packages__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #0f172a;
}

.a4a-roi-packages__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.a4a-roi-preset {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(255, 255, 255, 0.96);
  padding: 6px 12px;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 0.8rem;
  line-height: 1.3;
  color: #0f172a;
  transition:
    background 140ms ease-out,
    border-color 140ms ease-out,
    box-shadow 140ms ease-out,
    color 140ms ease-out,
    transform 120ms ease-out;
}

.a4a-roi-preset__title {
  font-weight: 600;
}

.a4a-roi-preset__desc {
  font-size: 0.75rem;
  color: #6b7280;
}

.a4a-roi-preset:hover {
  border-color: #27aee1;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.a4a-roi-preset.is-active {
  background: linear-gradient(135deg, #6ec1e4, #27aee1);
  border-color: rgba(37, 99, 235, 0.95);
  box-shadow: 0 12px 24px rgba(56, 189, 248, 0.5);
  color: #f9fafb;
}

.a4a-roi-preset.is-active .a4a-roi-preset__desc {
  color: rgba(241, 245, 249, 0.85);
}

.a4a-roi-packages__note {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
}

/* Mobile: Buttons 2-spaltig */

@media (max-width: 768px) {
  .a4a-roi-packages__buttons {
    flex-wrap: wrap;
  }
  .a4a-roi-preset {
    flex: 1 1 calc(50% - 8px);
  }
}

/* Eingabefelder-Grid */

.a4a-roi-calc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

@media (max-width: 768px) {
  .a4a-roi-calc__grid {
    grid-template-columns: 1fr;
  }
}

/* Label + Input */

.a4a-roi-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: #4b5563;
}

.a4a-roi-field span strong {
  font-weight: 600;
}

.a4a-roi-field input {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  padding: 8px 12px;
  font-size: 0.96rem;
  line-height: 1.4;
  color: #0f172a;
  outline: none;
  background: #ffffff;
  transition:
    border-color 140ms ease-out,
    box-shadow 140ms ease-out,
    background 140ms ease-out;
  width: 100%;
  box-sizing: border-box;
}

.a4a-roi-field input:focus {
  border-color: #27aee1;
  box-shadow: 0 0 0 1px rgba(39, 174, 225, 0.4);
}

/* Kostenannahmen (optional) */

.a4a-roi-advanced {
  margin-top: 8px;
  border-radius: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.7);
  padding: 8px 12px 10px;
  background: rgba(248, 250, 252, 0.9);
}

.a4a-roi-advanced[open] {
  background: rgba(241, 245, 249, 0.98);
}

.a4a-roi-advanced__summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.a4a-roi-advanced__summary::-webkit-details-marker {
  display: none;
}

.a4a-roi-advanced__summary::before {
  content: "▾";
  font-size: 0.8rem;
  color: #27aee1;
  transform: translateY(1px);
}

.a4a-roi-advanced[open] .a4a-roi-advanced__summary::before {
  content: "▴";
}

.a4a-roi-advanced__inner {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.a4a-roi-advanced__hint {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.a4a-roi-advanced__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

@media (max-width: 768px) {
  .a4a-roi-advanced__grid {
    grid-template-columns: 1fr;
  }
}

/* Actions */

.a4a-roi-calc__actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.a4a-roi-calc__hint {
  font-size: 0.82rem;
  color: #6b7280;
}

/* Button */

.a4a-roi-btn {
  border-radius: 999px;
  border: none;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 150ms ease-out,
    color 150ms ease-out,
    box-shadow 150ms ease-out;
}

.a4a-roi-btn--ghost {
  background: rgba(255, 255, 255, 0.8);
  color: #0891b2;
  border: 1px solid rgba(148, 163, 184, 0.6);
}

.a4a-roi-btn--ghost:hover {
  background: #e0f5ff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

/* Rechte Seite – Ergebnisse */

.a4a-roi-calc__right {
  padding: 18px 0 0;
}

@media (max-width: 1024px) {
  .a4a-roi-calc__right {
    padding-top: 0;
  }
}

.a4a-roi-results {
  border-radius: 24px;
  padding: 22px 24px 24px;
  background: #020617;
  color: #e5f3fb;
  box-shadow:
    0 18px 55px rgba(15, 23, 42, 0.85),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.a4a-roi-results__title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
}

.a4a-roi-results__sub {
  margin: 0;
  font-size: 0.9rem;
  color: #cbd5f5;
}

/* Ergebnis-Karten */

.a4a-roi-results__grid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 768px) {
  .a4a-roi-results__grid {
    grid-template-columns: 1fr;
  }
}

.a4a-roi-result-card {
  border-radius: 18px;
  padding: 12px 14px 10px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(30, 64, 175, 0.8);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.a4a-roi-result-card--accent {
  background: radial-gradient(
      circle at 0 0,
      rgba(56, 189, 248, 0.22),
      transparent
    ),
    rgba(15, 23, 42, 0.98);
  border-color: rgba(59, 130, 246, 0.95);
}

.a4a-roi-result-card__label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
}

.a4a-roi-result-card__value {
  font-size: 1.4rem;
  font-weight: 600;
  color: #f9fafb;
}

.a4a-roi-result-card__detail {
  font-size: 0.8rem;
  color: #9ca3af;
}

/* CTA unten */

.a4a-roi-results__cta {
  margin-top: 4px;
  font-size: 0.86rem;
  color: #cbd5f5;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}

.a4a-roi-link {
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 500;
}

.a4a-roi-link:hover {
  text-decoration: underline;
}

/* Dark Mode Anpassungen (wenn body oder html .a4a-dark hat) */

.a4a-dark .a4a-roi-calc-section,
body.a4a-dark .a4a-roi-calc-section {
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(110, 193, 228, 0.22), #020617),
    radial-gradient(130% 140% at 100% 0%, rgba(39, 174, 225, 0.28), #020617);
}

.a4a-dark .a4a-roi-calc__left,
body.a4a-dark .a4a-roi-calc__left {
  background: rgba(15, 23, 42, 0.96);
  color: #e5e7eb;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(30, 64, 175, 0.7);
}

.a4a-dark .a4a-roi-calc__title,
body.a4a-dark .a4a-roi-calc__title {
  color: #e5f3fb;
}

.a4a-dark .a4a-roi-calc__sub,
body.a4a-dark .a4a-roi-calc__sub {
  color: #cbd5f5;
}

.a4a-dark .a4a-roi-field,
body.a4a-dark .a4a-roi-field {
  color: #cbd5f5;
}

.a4a-dark .a4a-roi-field input,
body.a4a-dark .a4a-roi-field input {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(55, 65, 81, 0.9);
  color: #e5e7eb;
}

.a4a-dark .a4a-roi-field input:focus,
body.a4a-dark .a4a-roi-field input:focus {
  border-color: rgba(59, 130, 246, 0.9);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.6);
}

.a4a-dark .a4a-roi-btn--ghost,
body.a4a-dark .a4a-roi-btn--ghost {
  background: rgba(15, 23, 42, 0.98);
  color: #e5f3fb;
  border-color: rgba(55, 65, 81, 0.9);
}

.a4a-dark .a4a-roi-btn--ghost:hover,
body.a4a-dark .a4a-roi-btn--ghost:hover {
  background: rgba(15, 23, 42, 1);
}

.a4a-dark .a4a-roi-calc__hint,
body.a4a-dark .a4a-roi-calc__hint {
  color: #9ca3af;
}

.a4a-dark .a4a-roi-advanced,
body.a4a-dark .a4a-roi-advanced {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(55, 65, 81, 0.9);
}

.a4a-dark .a4a-roi-advanced[open],
body.a4a-dark .a4a-roi-advanced[open] {
  background: rgba(15, 23, 42, 0.98);
}

.a4a-dark .a4a-roi-advanced__summary,
body.a4a-dark .a4a-roi-advanced__summary {
  color: #e5e7eb;
}

.a4a-dark .a4a-roi-advanced__hint,
body.a4a-dark .a4a-roi-advanced__hint {
  color: #9ca3af;
}

.a4a-dark .a4a-roi-packages__label,
body.a4a-dark .a4a-roi-packages__label {
  color: #e5e7eb;
}

.a4a-dark .a4a-roi-packages__note,
body.a4a-dark .a4a-roi-packages__note {
  color: #9ca3af;
}

.a4a-dark .a4a-roi-preset,
body.a4a-dark .a4a-roi-preset {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(55, 65, 81, 0.9);
  color: #e5e7eb;
}

.a4a-dark .a4a-roi-preset__desc,
body.a4a-dark .a4a-roi-preset__desc {
  color: #9ca3af;
}

.a4a-dark .a4a-roi-preset.is-active,
body.a4a-dark .a4a-roi-preset.is-active {
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  border-color: rgba(59, 130, 246, 0.95);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
}

/* =========================================================
   REFERENZEN / TESTIMONIALS SEKTION MIT LOGO + SLIDER + NEBENKARTEN
   ========================================================= */

.a4a-testimonials-section {
  padding: 80px 0 80px;
}

/* Headline & Intro */

.a4a-testimonials-section
  .elementor-widget-heading
  .elementor-heading-title {
  font-size: clamp(1.9rem, 2.1vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #0f172a;
  margin-bottom: 0.4em;
  position: relative;
  display: inline-block;
}

.a4a-testimonials-section
  .elementor-widget-heading
  .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.45em;
  width: 78px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ec1e4, #27aee1);
}

.a4a-testimonials-section .elementor-widget-text-editor {
  max-width: 760px;
  font-size: 0.96rem;
  line-height: 1.7;
  color: #4b5563;
}

/* Grid Layout – Basis (falls kein Slider aktiv wäre) */

.a4a-testimonials-grid {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

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

@media (max-width: 768px) {
  .a4a-testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* Testimonial Cards – Grundstil */

.a4a-testimonial-card {
  border-radius: 22px;
  padding: 20px 20px 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(148, 163, 184, 0.18);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition:
    transform 160ms ease-out,
    box-shadow 160ms ease-out,
    background 160ms ease-out,
    border-color 160ms ease-out;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* Farbiger Streifen oben */

.a4a-testimonial-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6ec1e4, #27aee1);
}

/* Quote Icon */

.a4a-testimonial-card::after {
  content: "“";
  position: absolute;
  font-size: 4rem;
  line-height: 1;
  right: 12px;
  top: 4px;
  color: rgba(148, 163, 184, 0.25);
  font-family: Georgia, "Times New Roman", serif;
}

/* Logos */

.a4a-testimonial-card .elementor-widget-image {
  margin-bottom: 4px;
}

.a4a-testimonial-card .elementor-widget-image img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: saturate(1.1);
}

/* Hover-Effekt (normales Grid) */

.a4a-testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 26px 60px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(39, 174, 225, 0.5);
  border-color: rgba(39, 174, 225, 0.7);
}

/* Name */

.a4a-testimonial-card
  .elementor-widget-heading
  .elementor-heading-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
}

/* Meta (Rolle, Position) – erste Text-Widget nach Heading */

.a4a-testimonial-card .elementor-widget-text-editor:nth-of-type(1) p {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: #64748b;
}

/* Zitat – zweites Text-Widget */

.a4a-testimonial-card .elementor-widget-text-editor:nth-of-type(2) p {
  margin: 6px 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #111827;
}

/* Fallback – letztes p ohne Extra-Abstand */

.a4a-testimonial-card .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   SLIDER-MODUS MIT NACHBAR-CARDS
   ========================================================= */

/* JS setzt .a4a-has-slider auf die Sektion */

.a4a-has-slider .a4a-testimonials-grid {
  position: relative;
  display: block;
}

/* Grundzustand aller Slides im Slider: unsichtbar */

.a4a-has-slider .a4a-testimonial-card {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 10px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  transition:
    opacity 220ms ease-out,
    transform 220ms ease-out,
    box-shadow 160ms ease-out,
    border-color 160ms ease-out;
}

/* Aktive Karte – mittig, voll sichtbar */

.a4a-has-slider .a4a-testimonial-card.is-active {
  position: relative;
  left: auto;
  top: auto;
  opacity: 1;
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
  z-index: 3;
}

/* Nachbar-Karten – leicht verblasst links und rechts */

.a4a-has-slider .a4a-testimonial-card.is-prev,
.a4a-has-slider .a4a-testimonial-card.is-next {
  opacity: 0.35;
  pointer-events: none;
  z-index: 2;
}

/* Linke Karte (vorherige) */

.a4a-has-slider .a4a-testimonial-card.is-prev {
  left: 50%;
  top: 6px;
  transform: translate(-120%, 4px) scale(0.94);
}

/* Rechte Karte (nächste) */

.a4a-has-slider .a4a-testimonial-card.is-next {
  left: 50%;
  top: 6px;
  transform: translate(20%, 4px) scale(0.94);
}

/* Hover-Effekt im Slider nur dezenter auf der aktiven Karte */

.a4a-has-slider .a4a-testimonial-card.is-active:hover {
  transform: translate(0, -2px) scale(1.005);
  box-shadow:
    0 22px 55px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(39, 174, 225, 0.45);
}

/* Navigation unter dem Slider */

.a4a-testimonials-slider-nav {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.a4a-testimonials-prev,
.a4a-testimonials-next {
  border-radius: 999px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: #ffffff;
  font-size: 1.2rem;
  line-height: 1;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background 140ms ease-out,
    border-color 140ms ease-out,
    box-shadow 140ms ease-out,
    color 140ms ease-out,
    transform 120ms ease-out;
}

.a4a-testimonials-prev:hover,
.a4a-testimonials-next:hover {
  background: #e0f5ff;
  border-color: #27aee1;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* Dots */

.a4a-testimonials-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.a4a-testimonials-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(148, 163, 184, 0.7);
  cursor: pointer;
  transition:
    background 140ms ease-out,
    width 140ms ease-out,
    box-shadow 140ms ease-out;
}

.a4a-testimonials-dot.is-active {
  width: 18px;
  background: linear-gradient(90deg, #6ec1e4, #27aee1);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.5);
}

/* Mobile: Nachbar-Karten ausblenden, damit es nicht zu eng wird */

@media (max-width: 768px) {
  .a4a-has-slider .a4a-testimonial-card {
    max-width: 100%;
  }

  .a4a-has-slider .a4a-testimonial-card.is-prev,
  .a4a-has-slider .a4a-testimonial-card.is-next {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.96);
  }

  .a4a-testimonials-slider-nav {
    gap: 10px;
  }
}

/* =========================================================
   DARK MODE
   ========================================================= */

.a4a-dark .a4a-testimonials-section,
body.a4a-dark .a4a-testimonials-section {
  background: radial-gradient(
      130% 160% at 0 0,
      rgba(15, 23, 42, 0.9),
      #020617
    );
}

.a4a-dark
  .a4a-testimonials-section
  .elementor-widget-heading
  .elementor-heading-title,
body.a4a-dark
  .a4a-testimonials-section
  .elementor-widget-heading
  .elementor-heading-title {
  color: #e5f3fb;
}

.a4a-dark .a4a-testimonials-section .elementor-widget-text-editor,
body.a4a-dark .a4a-testimonials-section .elementor-widget-text-editor {
  color: #cbd5f5;
}

/* Dark Mode – Cards */

.a4a-dark .a4a-testimonial-card,
body.a4a-dark .a4a-testimonial-card {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(30, 64, 175, 0.8);
  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(30, 64, 175, 0.85);
}

.a4a-dark .a4a-testimonial-card::after,
body.a4a-dark .a4a-testimonial-card::after {
  color: rgba(30, 64, 175, 0.7);
}

.a4a-dark
  .a4a-testimonial-card
  .elementor-widget-heading
  .elementor-heading-title,
body.a4a-dark
  .a4a-testimonial-card
  .elementor-widget-heading
  .elementor-heading-title {
  color: #e5f3fb;
}

.a4a-dark
  .a4a-testimonial-card
  .elementor-widget-text-editor:nth-of-type(1)
  p,
body.a4a-dark
  .a4a-testimonial-card
  .elementor-widget-text-editor:nth-of-type(1)
  p {
  color: #9ca3af;
}

.a4a-dark
  .a4a-testimonial-card
  .elementor-widget-text-editor:nth-of-type(2)
  p,
body.a4a-dark
  .a4a-testimonial-card
  .elementor-widget-text-editor:nth-of-type(2)
  p {
  color: #e5e7eb;
}

.a4a-dark .a4a-testimonial-card .elementor-widget-image img,
body.a4a-dark .a4a-testimonial-card .elementor-widget-image img {
  filter: saturate(1.1) brightness(1.05);
}

/* Dark Mode – Slider Controls */

.a4a-dark .a4a-testimonials-prev,
.a4a-dark .a4a-testimonials-next,
body.a4a-dark .a4a-testimonials-prev,
body.a4a-dark .a4a-testimonials-next {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(55, 65, 81, 0.9);
  color: #e5e7eb;
}

.a4a-dark .a4a-testimonials-prev:hover,
.a4a-dark .a4a-testimonials-next:hover,
body.a4a-dark .a4a-testimonials-prev:hover,
body.a4a-dark .a4a-testimonials-next:hover {
  background: rgba(15, 23, 42, 1);
}

.a4a-dark .a4a-testimonials-dot,
body.a4a-dark .a4a-testimonials-dot {
  background: rgba(75, 85, 99, 0.9);
}

.a4a-dark .a4a-testimonials-dot.is-active,
body.a4a-dark .a4a-testimonials-dot.is-active {
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.9);
}

/* =========================================================
   A4A – Prozess-Schritte als horizontale Karten
   ========================================================= */

/* Wrapper-Reihe: 4 Karten nebeneinander auf Desktop */
.a4a-process-row {
  max-width: 1160px;
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* Einzelne Karte */
.a4a-process-card {
  position: relative;
  border-radius: 22px;
  padding: 32px 22px 22px;
  background: radial-gradient(circle at top left, #f5fbff 0%, #ffffff 50%, #f3f4f6 100%);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  text-align: left;
  overflow: hidden;
  transition:
    transform 160ms ease-out,
    box-shadow 160ms ease-out,
    border-color 160ms ease-out,
    background 160ms ease-out;
}

/* Hover-Effekt */
.a4a-process-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(39, 174, 225, 0.65);
  border-color: rgba(39, 174, 225, 0.8);
  background: #ffffff;
}

/* Nummern-Badge oben */
.a4a-process-card-badge {
  position: absolute;
  top: 16px;
  left: 18px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6ec1e4, #27aee1);
  color: #0b1120;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.4);
}

/* Titel */
.a4a-process-card-title {
  margin: 18px 0 6px;
  padding-left: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: #0f172a;
}

/* Text */
.a4a-process-card-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #4b5563;
}

/* -------------------- Responsive -------------------- */

/* Tablet: 2 Karten nebeneinander */
@media (max-width: 1024px) {
  .a4a-process-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Handy: alle Karten untereinander (aber schön) */
@media (max-width: 767px) {
  .a4a-process-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .a4a-process-card {
    padding: 28px 18px 18px;
  }

  .a4a-process-card-badge {
    top: 14px;
    left: 14px;
    width: 30px;
    height: 30px;
    font-size: 0.86rem;
  }

  .a4a-process-card-title {
    margin-top: 16px;
  }
}

/* -------------------- Dark Mode (falls aktiv) -------------------- */

body.a4a-dark .a4a-process-card {
  background: radial-gradient(circle at top left, #020617 0%, #020617 40%, #020617 100%);
  border-color: rgba(30, 64, 175, 0.9);
  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(30, 64, 175, 0.9);
}

body.a4a-dark .a4a-process-card-title {
  color: #e5f3fb;
}

body.a4a-dark .a4a-process-card-text {
  color: #e5e7eb;
}

body.a4a-dark .a4a-process-card-badge {
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.55);
}

/* Section-Hintergrund, angelehnt an den ROI-Rechner */
.a4a-faq-section {
  padding: 70px 0 80px;
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(110, 193, 228, 0.18), transparent),
    radial-gradient(130% 140% at 100% 0%, rgba(39, 174, 225, 0.18), transparent),
    #f5fbff;
}

/* Wrapper */
.a4a-faq-wrapper {
  margin-top: 24px;
  max-width: 1180px;
}

/* Topic-Buttons oben */
.a4a-faq-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.a4a-faq-topic-btn {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(255, 255, 255, 0.96);
  padding: 6px 14px;
  font-size: 0.86rem;
  line-height: 1.3;
  color: #0f172a;
  cursor: pointer;
  transition:
    background 140ms ease-out,
    border-color 140ms ease-out,
    box-shadow 140ms ease-out,
    color 140ms ease-out,
    transform 120ms ease-out;
}

.a4a-faq-topic-btn:hover {
  border-color: #27aee1;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.a4a-faq-topic-btn.is-active {
  background: linear-gradient(135deg, #6ec1e4, #27aee1);
  border-color: rgba(37, 99, 235, 0.95);
  box-shadow: 0 12px 24px rgba(56, 189, 248, 0.5);
  color: #f9fafb;
}

/* Gruppen (Topics) */
.a4a-faq-groups {
  position: relative;
}

.a4a-faq-group {
  display: none;
}

.a4a-faq-group.is-active {
  display: block;
}

/* Einzelne FAQ-Items */
.a4a-faq-item {
  border-radius: 18px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(148, 163, 184, 0.15);
  overflow: hidden;
  transition:
    box-shadow 160ms ease-out,
    border-color 160ms ease-out,
    background 160ms ease-out;
}

/* Frage-Button */
.a4a-faq-question {
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  border: none;
  background: transparent;
  font-size: 0.98rem;
  font-weight: 500;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.a4a-faq-icon {
  margin-left: 12px;
  font-size: 1rem;
  transform-origin: center;
  transition: transform 160ms ease-out;
}

/* Antwort-Bereich */
.a4a-faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #4b5563;
  transition:
    max-height 200ms ease-out,
    padding-top 160ms ease-out,
    padding-bottom 160ms ease-out;
}

.a4a-faq-answer p:last-child {
  margin-bottom: 14px;
}

/* Geöffnetes Item */
.a4a-faq-item.is-open {
  background: radial-gradient(circle at top left, #ffffff, #e5f3fb);
  border-color: rgba(148, 163, 184, 0.55);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14);
}

.a4a-faq-item.is-open .a4a-faq-answer {
  max-height: 400px; /* genug für Text, bei Bedarf anpassen */
  padding-top: 4px;
  padding-bottom: 10px;
}

.a4a-faq-item.is-open .a4a-faq-icon {
  transform: rotate(45deg);
}

/* Mobile Tweaks */
@media (max-width: 768px) {
  .a4a-faq-section {
    padding: 56px 0 64px;
  }

  .a4a-faq-topic-btn {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }

  .a4a-faq-question {
    font-size: 0.94rem;
  }
}

/* Dark Mode, falls du den global nutzt */
body.a4a-dark .a4a-faq-section {
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(110, 193, 228, 0.22), #020617),
    radial-gradient(130% 140% at 100% 0%, rgba(39, 174, 225, 0.28), #020617);
}

body.a4a-dark .a4a-faq-item {
  background: rgba(15, 23, 42, 0.97);
  border-color: rgba(30, 64, 175, 0.8);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(30, 64, 175, 0.85);
}

body.a4a-dark .a4a-faq-item.is-open {
  background: radial-gradient(circle at top left, #111827, #020617);
  border-color: rgba(56, 189, 248, 0.9);
}

body.a4a-dark .a4a-faq-question {
  color: #e5f3fb;
}

body.a4a-dark .a4a-faq-answer {
  color: #e5e7eb;
}

/* =========================================================
   IMPRESSUM / RECHTLICHE SEITEN – A4A LOOK & FEEL
   ========================================================= */

.a4a-legal-section {
  position: relative;
  padding: 80px 0 90px;
  /* Hintergrund ähnlich ROI-Rechner / FAQ */
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(110, 193, 228, 0.18), transparent),
    radial-gradient(130% 140% at 100% 0%, rgba(39, 174, 225, 0.18), transparent),
    #f5fbff;
}

/* Card in der Mitte für den Impressum-Text */
.a4a-legal-inner {
  max-width: 960px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  padding: 32px 32px 38px;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(148, 163, 184, 0.14);
}

/* Hauptüberschrift "Impressum" */
.a4a-legal-title,
.a4a-legal-inner h1 {
  font-size: clamp(1.9rem, 2.2vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #0f172a;
  margin: 0 0 1rem;
  position: relative;
}

/* Blaue Unterstreichung unter der H1 wie auf der Landingpage */
.a4a-legal-title::after,
.a4a-legal-inner h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.55rem;
  width: 80px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ec1e4, #27aee1);
}

/* Intro-Absatz direkt unter der H1 (falls vorhanden) */
.a4a-legal-inner > p:first-of-type {
  margin-top: 1.8rem;
  font-size: 0.96rem;
  line-height: 1.7;
  color: #4b5563;
}

/* Unterüberschriften der rechtlichen Abschnitte */
.a4a-legal-subtitle,
.a4a-legal-inner h2,
.a4a-legal-inner h3 {
  margin: 2rem 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
}

/* Fließtext, Listen etc. */
.a4a-legal-inner p,
.a4a-legal-inner li {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #4b5563;
  margin-bottom: 0.6rem;
}

.a4a-legal-inner ul,
.a4a-legal-inner ol {
  padding-left: 1.4rem;
  margin: 0.4rem 0 1rem;
}

/* Adress- / Kontaktblöcke schön gesetzt */
.a4a-legal-inner address {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0.6rem 0 1.2rem;
}

/* Links im Impressum */
.a4a-legal-inner a {
  color: #27aee1;
  text-decoration: none;
  border-bottom: 1px solid rgba(39, 174, 225, 0.35);
  transition: color 0.15s ease-out, border-color 0.15s ease-out;
}

.a4a-legal-inner a:hover {
  color: #1995c4;
  border-color: rgba(39, 174, 225, 0.8);
}

/* Optionale kleine Meta-Zeile (z.B. Verantwortlicher) hervorheben */
.a4a-legal-meta {
  margin-top: 1.2rem;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.5);
  font-size: 0.84rem;
  color: #6b7280;
}

/* Responsive – auf Mobile etwas mehr Luft & kleinere Fonts */
@media (max-width: 768px) {
  .a4a-legal-section {
    padding: 60px 0 70px;
  }

  .a4a-legal-inner {
    padding: 22px 18px 26px;
    border-radius: 18px;
  }

  .a4a-legal-inner h1,
  .a4a-legal-title {
    font-size: 1.6rem;
  }

  .a4a-legal-inner h2,
  .a4a-legal-inner h3 {
    font-size: 1rem;
  }

  .a4a-legal-inner p,
  .a4a-legal-inner li {
    font-size: 0.88rem;
  }
}

/* Dark-Mode Anpassungen, falls du den Toggle nutzt */
body.a4a-dark .a4a-legal-section {
  background:
    radial-gradient(130% 160% at 0 0, rgba(15, 23, 42, 0.9), #020617);
}

body.a4a-dark .a4a-legal-inner {
  background: rgba(15, 23, 42, 0.98);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(30, 64, 175, 0.85);
}

body.a4a-dark .a4a-legal-inner h1,
body.a4a-dark .a4a-legal-inner h2,
body.a4a-dark .a4a-legal-inner h3 {
  color: #e5f3fb;
}

body.a4a-dark .a4a-legal-inner p,
body.a4a-dark .a4a-legal-inner li,
body.a4a-dark .a4a-legal-inner address {
  color: #e5e7eb;
}

body.a4a-dark .a4a-legal-meta {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(55, 65, 81, 0.9);
  color: #9ca3af;
}/* End custom CSS */