.elementor-kit-6{--e-global-color-primary:#01696F;--e-global-color-secondary:#0C4E54;--e-global-color-text:#28251D;--e-global-color-accent:#CEDCD8;--e-global-color-ef0acd8:#F7F6F2;--e-global-color-aa7b9bb:#F9F8F5;--e-global-color-61573e7:#7A7974;--e-global-color-99f5215:#0A1E20;--e-global-color-7bfcdd8:#9DD5D9;--e-global-typography-primary-font-family:"Instrument Serif";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Instrument Serif";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-font-style:italic;--e-global-typography-text-font-family:"Plus Jakarta Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Plus Jakarta Sans";--e-global-typography-accent-font-weight:700;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.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);}@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 *//* ------------------------------------------------------------
   1. DESIGN TOKENS
   Zentrale Farb- und Helper-Variablen, werden überall referenziert
   ------------------------------------------------------------ */

:root {
  /* Hintergründe */
  --color-bg:           #f7f6f2;
  --color-surface:      #f9f8f5;

  /* Text */
  --color-text:         #28251d;
  --color-text-muted:   #7a7974;

  /* Marke */
  --color-primary:           #01696f;
  --color-primary-hover:     #0c4e54;
  --color-primary-highlight: #cedcd8;

  /* Hero */
  --color-hero-dark:    #0a1e20;
  --color-hero-accent:  #9dd5d9;

  /* Helper */
  --radius-full:        999px;
  --transition:         180ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* ------------------------------------------------------------
   2. GLOBALE BASIS
   Body-Defaults, Hello-Theme-Resets, Button-Schriftfarben
   ------------------------------------------------------------ */

body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Globale Link-Farbe (überschreibt Hello-Theme reset.css) */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-hover);
}

/* Button-Schriftfarben explizit, damit a-Regel sie nicht überschreibt */
.btn-primary,
.btn-primary:hover,
.btn-primary:visited {
  color: #ffffff;
}

.btn-ghost,
.btn-ghost:hover,
.btn-ghost:visited {
  color: #f5f3ef;
}

.btn-solid,
.btn-solid:hover,
.btn-solid:visited {
  color: #ffffff;
}

.btn-outline,
.btn-outline:hover,
.btn-outline:visited {
  color: var(--color-primary);
}


/* ============================================================
   HEADER & NAVIGATION (eigenständiger Block)
   Alle folgenden Sektionen gehören zusammen. Bei späterem Umbau
   (z.B. Mega-Menu) kann der komplette Bereich ab hier ersetzt
   werden, ohne den Rest zu beeinflussen.
   ============================================================ */


/* ------------------------------------------------------------
   3. HEADER WRAPPER
   Sticky-Verhalten + Glas-Effekt (Backdrop-Blur)
   ------------------------------------------------------------ */

.saarpfalz-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 246, 242, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Hinweis: border-bottom bewusst entfernt.
     Visuelle Trennung läuft über den Backdrop-Blur. */
}


/* ------------------------------------------------------------
   4. NAV: TOP-LEVEL LINKS (Desktop)
   Versicherungen, Wissen, Über uns ...
   Alle layoutrelevanten Properties mit !important fixiert,
   damit Hover-/Aktiv-States keinen Layout-Shift verursachen
   ------------------------------------------------------------ */

.saarpfalz-nav .elementor-nav-menu > li > a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--color-text);
  padding: .5rem 1rem !important;
  margin: 0 !important;
  border: 0 solid transparent !important;
  border-radius: var(--radius-full);
  box-sizing: border-box;
  transition: color var(--transition),
              background-color var(--transition);
  text-decoration: none !important;
}

/* Elementor-Default-Pointer ausschalten (sonst kämpft das CSS dagegen) */
.saarpfalz-nav .elementor-nav-menu > li > a::before,
.saarpfalz-nav .elementor-nav-menu > li > a::after {
  display: none !important;
}


/* ------------------------------------------------------------
   5. NAV: TOP-LEVEL STATES
   Hover, geöffneter Dropdown, aktive Seite
   ------------------------------------------------------------ */

/* Hover allein: nur Farbwechsel, kein Pill */
.saarpfalz-nav .elementor-nav-menu > li:hover > a {
  background-color: transparent;
  color: var(--color-primary);
}

/* Geöffneter Dropdown ODER aktive Seite: Pill-Tint als klare Markierung */
.saarpfalz-nav .elementor-nav-menu > li > a[aria-expanded="true"],
.saarpfalz-nav .elementor-nav-menu > li:focus-within > a,
.saarpfalz-nav .elementor-nav-menu > li.current-menu-item > a,
.saarpfalz-nav .elementor-nav-menu > li.current-menu-parent > a,
.saarpfalz-nav .elementor-nav-menu > li.current-menu-ancestor > a {
  background-color: var(--color-primary-highlight);
  color: var(--color-primary);
}


/* ------------------------------------------------------------
   6. DROPDOWN CONTAINER (Desktop)
   Card-Optik mit Border, Radius, Schatten, Fade-In
   Plus 4px Abstand zum Trigger oben und zum zweiten Dropdown rechts
   ------------------------------------------------------------ */

.saarpfalz-nav .elementor-nav-menu .sub-menu {
  background: #ffffff;
  border: 1px solid rgba(216, 213, 204, 0.55);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(40, 37, 29, 0.05),
              0 1px 3px  rgba(40, 37, 29, 0.04);
  padding: .5rem;
  min-width: 240px;
  animation: saarpfalz-dropdown-fade .18s ease-out;
}

@keyframes saarpfalz-dropdown-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Erste Dropdown-Ebene: 4px Abstand unter dem Top-Level-Trigger.
   !important nötig, weil Elementor selbst margin: 0 setzt */
.saarpfalz-nav .elementor-nav-menu > li > .sub-menu {
  margin-top: .25rem !important;
}

/* Items im Dropdown mit Untermenü brauchen position: relative,
   damit ihr Untermenü daran ankert */
.saarpfalz-nav .elementor-nav-menu .sub-menu li.menu-item-has-children {
  position: relative;
}

/* Zweite Cascade-Ebene öffnet sich nach RECHTS, mit 4px sichtbarem
   Abstand zum ersten Dropdown (12px margin minus 8px Innen-Padding) */
.saarpfalz-nav .elementor-nav-menu .sub-menu .sub-menu {
  position: absolute !important;
  top: -.5rem !important;
  left: 100% !important;
  margin: 0 0 0 .75rem !important;
}


/* ------------------------------------------------------------
   7. DROPDOWN ITEMS (Desktop)
   Einzelne Menüeinträge im Dropdown
   ------------------------------------------------------------ */

.saarpfalz-nav .elementor-nav-menu .sub-menu li > a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600 !important;
  font-size: 15px;
  color: var(--color-text);
  padding: .85rem 1.1rem;
  border-radius: 10px;
  transition: background-color .15s ease,
              color            .15s ease;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Hover, Focus und aktive Seite */
.saarpfalz-nav .elementor-nav-menu .sub-menu li > a:hover,
.saarpfalz-nav .elementor-nav-menu .sub-menu li > a:focus,
.saarpfalz-nav .elementor-nav-menu .sub-menu li.current-menu-item > a {
  background-color: rgba(206, 220, 216, 0.6);
  color: var(--color-primary-hover);
}


/* ------------------------------------------------------------
   8. SUB-PFEILE / CHEVRONS
   Indikatoren für Items, die ein Untermenü haben
   ------------------------------------------------------------ */

/* Im Submenu: Elementors eigenen Pfeil ausblenden, da nicht zuverlässig */
.saarpfalz-nav .elementor-nav-menu .sub-menu .sub-arrow {
  display: none !important;
}

/* Eigener nach rechts zeigender Pfeil als CSS-gezeichnetes Dreieck.
   Stilistisch konsistent zum gefüllten ▼ auf Top-Level. */
.saarpfalz-nav .elementor-nav-menu .sub-menu li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 5px;
  border-color: transparent transparent transparent currentColor;
  opacity: .5;
  flex-shrink: 0;
  transition: opacity .15s ease,
              transform .15s ease;
}

.saarpfalz-nav .elementor-nav-menu .sub-menu li.menu-item-has-children:hover > a::after {
  opacity: 1;
  transform: translateX(2px);
}


/* ------------------------------------------------------------
   9. MOBILE & TABLET RESET (≤1024px)
   Auf kleineren Screens schaltet Elementor in den Hamburger-Modus.
   Submenüs werden dort vertikal gestapelt, nicht ausgeklappt.
   Hier setzen wir die problematischen Desktop-Properties zurück.
   ------------------------------------------------------------ */

@media (max-width: 1024px) {

  /* Top-Level-Items: keine Pills, einfache Block-Optik */
  .saarpfalz-nav .elementor-nav-menu > li > a {
    border-radius: 0 !important;
    padding: .85rem 1.5rem !important;
  }

  /* Top-Level Hover/Aktiv: nur Farbwechsel, kein Pill-Hintergrund */
  .saarpfalz-nav .elementor-nav-menu > li:hover > a,
  .saarpfalz-nav .elementor-nav-menu > li > a[aria-expanded="true"],
  .saarpfalz-nav .elementor-nav-menu > li:focus-within > a,
  .saarpfalz-nav .elementor-nav-menu > li.current-menu-item > a,
  .saarpfalz-nav .elementor-nav-menu > li.current-menu-parent > a,
  .saarpfalz-nav .elementor-nav-menu > li.current-menu-ancestor > a {
    background-color: transparent !important;
  }

  /* Submenüs aller Ebenen: inline statt absolut positioniert,
     keine Card-Optik (kein Border, Schatten, Radius) */
  .saarpfalz-nav .elementor-nav-menu .sub-menu,
  .saarpfalz-nav .elementor-nav-menu .sub-menu .sub-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    min-width: 0 !important;
  }

  /* Submenu-Items: Text und Pfeil direkt nebeneinander am Anfang
     (NICHT space-between, sonst wandert der Pfeil ans Bildschirmende) */
  .saarpfalz-nav .elementor-nav-menu .sub-menu li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: .7rem 1.5rem .7rem 2.5rem !important;
    border-radius: 0 !important;
    gap: .5rem !important;
  }

  .saarpfalz-nav .elementor-nav-menu .sub-menu .sub-menu li > a {
    padding-left: 3.5rem !important;
  }

  /* Submenu-Hover: dezenter, ohne Pill */
  .saarpfalz-nav .elementor-nav-menu .sub-menu li > a:hover,
  .saarpfalz-nav .elementor-nav-menu .sub-menu li > a:focus {
    background-color: transparent !important;
    color: var(--color-primary) !important;
  }

  /* Pfeil-Indikator auf Mobile: zeigt nach UNTEN (Akkordeon),
     direkt neben dem Text (nicht margin-left: auto) */
  .saarpfalz-nav .elementor-nav-menu .sub-menu li.menu-item-has-children > a::after {
    content: "" !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 5px 4px 0 4px !important;
    border-color: currentColor transparent transparent transparent !important;
    opacity: .5;
    margin-left: 0 !important;
    flex-shrink: 0;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Instrument Serif';
	font-style: italic;
	font-weight: normal;
	font-display: auto;
	src: url('https://saarpfalz.versicherung/wp-content/uploads/2026/05/instrument-serif-v5-latin-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Instrument Serif';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://saarpfalz.versicherung/wp-content/uploads/2026/05/instrument-serif-v5-latin-regular.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://saarpfalz.versicherung/wp-content/uploads/2026/05/plus-jakarta-sans-v12-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://saarpfalz.versicherung/wp-content/uploads/2026/05/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://saarpfalz.versicherung/wp-content/uploads/2026/05/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://saarpfalz.versicherung/wp-content/uploads/2026/05/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
}
/* End Custom Fonts CSS */