.elementor-kit-6{--e-global-color-primary:#0066D8;--e-global-color-secondary:#071E3D;--e-global-color-text:#172033;--e-global-color-accent:#4CA5F5;--e-global-color-39bb1cf:#BDEBD8;--e-global-color-3f258de:#C7E3FB;--e-global-color-89514a6:#DCD3F5;--e-global-color-3524041:#FFDFC2;--e-global-color-e4a2016:#F9D6E0;--e-global-color-b90c4e0:#596577;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-size:20px;--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:19px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */:root {
  /* Grundfarben (bewährt) */
  --mr-blue: #0066d8;
  --mr-blue-2: #4ca5f5;
  --mr-blue-dark: #053a76;
  --mr-navy: #071e3d;
  --mr-text: #172033;
  --mr-muted: #596577;
  --mr-soft: #edf6ff;
  --mr-glass: rgba(255, 255, 255, 0.82);
  --mr-shadow: 0 28px 76px rgba(13, 43, 79, 0.13);

  /* Pastell-Palette (Flächen) */
  --mr-mint:    #bdebd8;
  --mr-sky:     #c7e3fb;
  --mr-lilac:   #dcd3f5;
  --mr-apricot: #ffdfc2;
  --mr-rose:    #f9d6e0;

  /* Pastell hover (leicht dunkler) */
  --mr-mint-h:    #a5e3c9;
  --mr-sky-h:     #aed6f8;
  --mr-lilac-h:   #cbbdf0;
  --mr-apricot-h: #ffd0a3;
  --mr-rose-h:    #f4bfd0;

  /* Kräftige Partner-Töne (Marker, Icons, Linien – lesbar auf Weiß) */
  --mr-mint-d:    #1e8a66;
  --mr-sky-d:     #1d6fc4;
  --mr-lilac-d:   #6b4fbb;
  --mr-apricot-d: #c56a1f;
  --mr-rose-d:    #c2447a;

  --mr-radius: 28px;
  --mr-radius-sm: 16px;
}

/* ---------- Grundlagen ---------- */
body {
  color: var(--mr-text);
  background:
    radial-gradient(1100px 520px at 12% -6%, rgba(76, 165, 245, 0.14), transparent 60%),
    radial-gradient(900px 480px at 95% 8%, rgba(189, 235, 216, 0.35), transparent 55%),
    linear-gradient(180deg, #f7fbff 0%, #eef5fd 100%);
}
img { height: auto; }

/* Genau eine H1 pro Seite – Gradient-Akzent */
.mr-gradient {
  background: linear-gradient(92deg, var(--mr-blue) 0%, var(--mr-blue-2) 55%, var(--mr-mint-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Glass-Karte ---------- */
.mr-glass {
  background: var(--mr-glass);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--mr-radius);
  box-shadow: var(--mr-shadow);
}

/* ---------- Stats-Reihe (nie in den Hero ragen!) ---------- */
.mr-stats { margin-top: 24px; }

/* ---------- Eyebrow-Pill ---------- */
.mr-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--mr-sky);
  color: var(--mr-navy);
}

/* ============================================================
   BUTTONS – Pastell mit dunkler Schrift (guter Kontrast)
   In Elementor: Button-Widget → Erweitert → CSS-Klassen
   z. B. "mr-btn mr-btn--mint" (ohne Punkt eintragen)
   ============================================================ */
.mr-btn,
.mr-btn .elementor-button {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--mr-navy) !important;
  border: none;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 10px 26px rgba(13, 43, 79, 0.12);
}
.mr-btn:hover,
.mr-btn .elementor-button:hover { transform: translateY(-2px); }

.mr-btn--mint,    .mr-btn--mint .elementor-button    { background: var(--mr-mint); }
.mr-btn--sky,     .mr-btn--sky .elementor-button     { background: var(--mr-sky); }
.mr-btn--lilac,   .mr-btn--lilac .elementor-button   { background: var(--mr-lilac); }
.mr-btn--apricot, .mr-btn--apricot .elementor-button { background: var(--mr-apricot); }
.mr-btn--rose,    .mr-btn--rose .elementor-button    { background: var(--mr-rose); }

.mr-btn--mint:hover,    .mr-btn--mint .elementor-button:hover    { background: var(--mr-mint-h); }
.mr-btn--sky:hover,     .mr-btn--sky .elementor-button:hover     { background: var(--mr-sky-h); }
.mr-btn--lilac:hover,   .mr-btn--lilac .elementor-button:hover   { background: var(--mr-lilac-h); }
.mr-btn--apricot:hover, .mr-btn--apricot .elementor-button:hover { background: var(--mr-apricot-h); }
.mr-btn--rose:hover,    .mr-btn--rose .elementor-button:hover    { background: var(--mr-rose-h); }

/* Primär-Button (weiterhin Blau-Gradient, für Haupt-CTA) */
.mr-btn--primary,
.mr-btn--primary .elementor-button {
  background: linear-gradient(92deg, var(--mr-blue) 0%, var(--mr-blue-2) 100%);
  color: #fff !important;
}

/* ============================================================
   AUFZÄHLUNGEN – Pastell-Marker
   Container/Textwidget → Erweitert → CSS-Klassen: mr-list mr-list--mint
   ============================================================ */
.mr-list ul { list-style: none; padding-left: 0; margin: 0; }
.mr-list ul li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 12px;
  line-height: 1.75;
}
.mr-list ul li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 2px;
  width: 26px; height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
}
.mr-list--mint    ul li::before { background: var(--mr-mint);    color: var(--mr-mint-d); }
.mr-list--sky     ul li::before { background: var(--mr-sky);     color: var(--mr-sky-d); }
.mr-list--lilac   ul li::before { background: var(--mr-lilac);   color: var(--mr-lilac-d); }
.mr-list--apricot ul li::before { background: var(--mr-apricot); color: var(--mr-apricot-d); }
.mr-list--rose    ul li::before { background: var(--mr-rose);    color: var(--mr-rose-d); }

/* ============================================================
   SEKTIONS-AKZENTE – eine Klasse auf den Container, alles darin
   (Eyebrow, Listen-Marker, Icons, Linien) übernimmt die Farbe.
   Container → Erweitert → CSS-Klassen: mr-accent-mint usw.
   ============================================================ */
.mr-accent-mint    { --accent: var(--mr-mint);    --accent-d: var(--mr-mint-d); }
.mr-accent-sky     { --accent: var(--mr-sky);     --accent-d: var(--mr-sky-d); }
.mr-accent-lilac   { --accent: var(--mr-lilac);   --accent-d: var(--mr-lilac-d); }
.mr-accent-apricot { --accent: var(--mr-apricot); --accent-d: var(--mr-apricot-d); }
.mr-accent-rose    { --accent: var(--mr-rose);    --accent-d: var(--mr-rose-d); }

[class*="mr-accent-"] .mr-eyebrow { background: var(--accent); }
[class*="mr-accent-"] .mr-list ul li::before,
[class*="mr-accent-"] ul.mr-auto li::before { background: var(--accent); color: var(--accent-d); }
[class*="mr-accent-"] .mr-card { border-top: 4px solid var(--accent); }
[class*="mr-accent-"] .elementor-icon { color: var(--accent-d); }

/* ---------- Karten ---------- */
.mr-card {
  background: var(--mr-glass);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--mr-radius-sm);
  box-shadow: var(--mr-shadow);
  overflow: hidden;
  transition: transform 0.18s ease;
}
.mr-card:hover { transform: translateY(-4px); }
.mr-card-image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

/* ---------- Dunkle Sektionen (Fakten / CTA) ---------- */
.mr-dark {
  background: linear-gradient(135deg, var(--mr-navy) 0%, var(--mr-blue-dark) 100%);
  color: #eef5fd;
  border-radius: var(--mr-radius);
}
.mr-dark h2, .mr-dark h3 { color: #fff; }
.mr-dark .mr-btn { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

/* ---------- Blog-Beiträge (Theme Builder: Single Post) ---------- */
.mr-blog .elementor-widget-theme-post-content ul { list-style: none; padding-left: 0; }
.mr-blog .elementor-widget-theme-post-content ul li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
}
.mr-blog .elementor-widget-theme-post-content ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--mr-mint);
  border: 3px solid var(--mr-mint-h);
}
.mr-blog .elementor-widget-theme-post-content ul li:nth-child(4n+2)::before { background: var(--mr-sky);     border-color: var(--mr-sky-h); }
.mr-blog .elementor-widget-theme-post-content ul li:nth-child(4n+3)::before { background: var(--mr-lilac);   border-color: var(--mr-lilac-h); }
.mr-blog .elementor-widget-theme-post-content ul li:nth-child(4n)::before   { background: var(--mr-apricot); border-color: var(--mr-apricot-h); }
.mr-blog .elementor-widget-theme-post-content blockquote {
  background: var(--mr-soft);
  border-left: 5px solid var(--mr-lilac-d);
  border-radius: var(--mr-radius-sm);
  padding: 18px 24px;
  margin: 24px 0;
}
.mr-blog .elementor-widget-theme-post-content a { color: var(--mr-blue); }

/* ---------- FAQ (details/summary) ---------- */
.mr-faq details {
  background: var(--mr-glass);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--mr-radius-sm);
  padding: 16px 22px;
  margin-bottom: 12px;
  box-shadow: var(--mr-shadow);
}
.mr-faq summary { font-weight: 700; cursor: pointer; }
.mr-faq details[open] summary { color: var(--mr-blue-dark); }/* End custom CSS */