/* ==========================================================
   SSIPM MOBILE / TABLET MENU
   Breakpoint: 1024px
   ========================================================== */


/* ─── NUR AUF MOBILE/TABLET ANZEIGEN ─────────────────────── */

.smm-header,
.ssipm-mobile-menu {
  display: none;
}

@media (max-width: 1024px) {

  body {
    padding-top: 73px !important;
  }

  .smm-header {
    display: flex;
  }

  .ssipm-mobile-menu {
    display: flex;
  }
}


/* ─── MENU HEADER ─────────────────────────────────────────── */

.smm-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 10001;

  align-items: center;
  justify-content: space-between;

  padding: 16px 20px;

  background: #fff;
  border-bottom: 1px solid #e0e6ed;
}

.smm-logo img {
  height: 40px;
  width: auto;
}


/* ─── TOGGLE BUTTON / HAMBURGER / CLOSE ───────────────────── */

.smm-toggle,
.smm-toggle:hover,
.smm-toggle:focus,
.smm-toggle:focus-visible,
.smm-toggle:active,
.smm-toggle.is-active {
  background: transparent !important;
  background-color: transparent !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  color: #1E3A5F !important;

  cursor: pointer;

  padding: 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  -webkit-appearance: none;
  appearance: none;

  -webkit-tap-highlight-color: transparent;
}


/* Hamburger / Close SVG */

.smm-toggle svg,
.smm-toggle:hover svg,
.smm-toggle:focus svg,
.smm-toggle:focus-visible svg,
.smm-toggle:active svg,
.smm-toggle.is-active svg {
  width: 24px;
  height: 24px;

  color: #1E3A5F !important;
  stroke: #1E3A5F !important;
  fill: none !important;

  transition: none !important;
}


/* SVG Linien/Pfade ebenfalls fixieren */

.smm-toggle svg path,
.smm-toggle svg line,
.smm-toggle svg polyline,
.smm-toggle:hover svg path,
.smm-toggle:hover svg line,
.smm-toggle:hover svg polyline,
.smm-toggle:focus svg path,
.smm-toggle:focus svg line,
.smm-toggle:focus svg polyline,
.smm-toggle:active svg path,
.smm-toggle:active svg line,
.smm-toggle:active svg polyline,
.smm-toggle.is-active svg path,
.smm-toggle.is-active svg line,
.smm-toggle.is-active svg polyline {
  stroke: #1E3A5F !important;
}


/* Hamburger / Close wechseln */

.smm-toggle .icon-hamburger {
  display: block;
}

.smm-toggle .icon-close {
  display: none;
}

.smm-toggle.is-active .icon-hamburger {
  display: none;
}

.smm-toggle.is-active .icon-close {
  display: block;
}


/* ─── OVERLAY ─────────────────────────────────────────────── */

.ssipm-mobile-menu {
  position: fixed;

  top: 73px;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 10000;

  background: #f0f4f8;

  flex-direction: column;

  transform: translateY(-110%);
  transition: transform 0.3s ease;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  padding-left: 0 !important;
  margin-left: 0 !important;
}

.ssipm-mobile-menu.is-open {
  transform: translateY(0);
}


/* ─── SEARCH (JetSearch) ──────────────────────────────────── */

.smm-search {
  padding: 16px 20px 12px;

  background: #f0f4f8;

  flex-shrink: 0;
}

.smm-search .jet-search__field-wrapper,
.smm-search .jet-ajax-search__field-wrapper {
  display: flex;
  align-items: center;

  background: #fff;

  border: 1.5px solid #1a2b4a !important;
  border-radius: 100px !important;

  padding: 4px 16px !important;

  gap: 10px;

  box-shadow: none !important;
}

.smm-search .jet-search__field,
.smm-search .jet-ajax-search__field {
  border: none !important;
  outline: none !important;

  background: transparent !important;

  font-size: 15px !important;

  color: #1a2b4a !important;

  height: 42px !important;

  box-shadow: none !important;
}

.smm-search .jet-search__field::placeholder,
.smm-search .jet-ajax-search__field::placeholder {
  color: #8a9ab0 !important;
}

.smm-search .jet-search__submit,
.smm-search .jet-ajax-search__submit {
  background: none !important;

  border: none !important;

  padding: 0 !important;

  color: #1a2b4a !important;
}

.smm-search .jet-ajax-search__results-holder {
  border-radius: 12px !important;

  border: 1px solid #d8e0ea !important;

  box-shadow: 0 8px 24px rgba(26, 43, 74, 0.12) !important;

  margin-top: 6px !important;
}


/* ─── NAV LIST ────────────────────────────────────────────── */

.smm-nav {
  flex: 1;

  background: #f0f4f8;

  padding-left: 0 !important;
  margin-left: 0 !important;
}

.smm-nav ul {
  list-style: none;

  padding-left: 0 !important;
  margin-left: 0 !important;
}


/* ─── PARENT ROW ──────────────────────────────────────────── */

.smm-item-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;

  width: 100%;

  border-bottom: 1px solid #d8e0ea;

  min-height: 56px;
}

.smm-item-row.is-current {
  background: #1a2b4a;
}


/* Parent Label */

.smm-item-label {
  display: flex;
  align-items: center;

  padding: 0 8px 0 20px;

  font-size: 14px !important;
  font-weight: 700;

  color: #1a2b4a;

  text-decoration: none !important;

  flex: 0 1 auto;

  white-space: nowrap;
}

.smm-item-label:hover {
  color: #C4A77A;
}

.smm-item-row.is-current .smm-item-label {
  color: #fff !important;
}

.smm-item-row.is-current .smm-chevron {
  stroke: #fff;
}


/* ─── CHEVRON BUTTON ──────────────────────────────────────── */

.smm-chevron-btn,
.smm-l2-chevron-btn {
  background: none !important;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;

  cursor: pointer;

  margin-left: auto !important;

  padding: 0 20px 0 8px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  flex: 0 0 52px !important;

  -webkit-appearance: none;
  appearance: none;

  -webkit-tap-highlight-color: transparent;
}


/* Hover Pfeil */

.smm-chevron-btn:hover .smm-chevron,
.smm-l2-chevron-btn:hover .smm-chevron {
  stroke: #C4A77A;
}


/* Geöffnet */

.smm-chevron-btn.is-expanded .smm-chevron,
.smm-l2-chevron-btn.is-expanded .smm-chevron {
  transform: rotate(90deg);
}


/* ─── CHEVRON ─────────────────────────────────────────────── */

.smm-chevron {
  width: 20px;
  height: 20px;

  margin-left: auto !important;

  stroke: #1a2b4a;

  flex-shrink: 0;

  transition:
    transform 0.25s ease,
    stroke 0.2s ease;
}


/* ─── NICHT-PARENT ITEMS ─────────────────────────────────── */

.smm-nav > ul > li > a.smm-item {
  display: flex;
  align-items: center;

  padding: 0 20px;

  min-height: 56px;

  font-size: 14px !important;
  font-weight: 500;

  color: #1a2b4a;

  text-decoration: none;

  border-bottom: 1px solid #d8e0ea;

  transition: background 0.15s;
}

.smm-nav > ul > li > a.smm-item:hover {
  background: #e4ecf4;
}

.smm-nav > ul > li > a.smm-item.is-current {
  background: #1a2b4a;

  color: #fff !important;
}


/* ─── SUB-MENU – ALLE EBENEN ─────────────────────────────── */

.smm-sub,
.smm-l-deep,
.smm-l3 {
  background: #e8eef6 !important;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease;
}

.smm-sub.is-open,
.smm-l-deep.is-open,
.smm-l3.is-open {
  max-height: 1000px;
}


/* Submenu Listen */

.smm-sub ul,
.smm-l-deep ul,
.smm-l3 ul {
  padding: 4px 0 12px;

  list-style: none;

  padding-left: 0 !important;
  margin-left: 0 !important;
}


/* Submenu Links */

.smm-sub ul li a,
.smm-l-deep ul li a,
.smm-l3 ul li a {
  display: block;

  color: #1a2b4a;

  text-decoration: none;

  padding-top: 11px;
  padding-bottom: 11px;
  padding-right: 20px;

  font-size: 14px !important;

  transition:
    background 0.15s,
    color 0.15s;
}

.smm-sub ul li a:hover,
.smm-l-deep ul li a:hover,
.smm-l3 ul li a:hover {
  background: #dde6f0;

  color: #C4A77A;
}

.smm-sub ul li a.is-current,
.smm-l-deep ul li a.is-current,
.smm-l3 ul li a.is-current {
  color: #C4A77A !important;

  font-weight: 700;

  background: transparent !important;
}


/* ─── L2 ROW ──────────────────────────────────────────────── */

.smm-l2-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;

  width: 100%;

  min-height: 44px;

  background: transparent !important;
}

.smm-l2-row.is-current {
  background: transparent !important;
}


/* L2 Label */

.smm-l2-label {
  display: flex;
  align-items: center;

  padding-right: 8px;

  font-size: 14px !important;

  color: #1a2b4a;

  text-decoration: none !important;

  flex: 0 1 auto;

  white-space: nowrap;
}

.smm-l2-label:hover {
  color: #C4A77A;
}

.smm-l2-row.is-current .smm-l2-label {
  color: #C4A77A !important;
}

.smm-l2-row.is-current .smm-chevron {
  stroke: #C4A77A;
}


/* ─── FOOTER PANEL ────────────────────────────────────────── */

.smm-footer {
  background: #1a2b4a;

  flex-shrink: 0;

  padding: 8px 0 0;

  margin-left: 0 !important;
}

.smm-footer-links {
  list-style: none;

  padding-left: 0 !important;
  margin-left: 0 !important;
}

.smm-footer-links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.smm-footer-links li a {
  display: block;

  padding: 16px 20px;

  font-size: 15px;

  color: #fff;

  text-decoration: none;

  transition: background 0.15s;
}

.smm-footer-links li a:hover {
  background: rgba(255, 255, 255, 0.06);
}


/* CTA */

.smm-footer-links li.smm-cta a {
  background: #C4A77A;

  color: #122B49;

  font-weight: 700;
}

.smm-footer-links li.smm-cta a:hover {
  background: #b8954a;
}


/* ─── SPRACHAUSWAHL ──────────────────────────────────────── */
/* TODO: Styling einbauen sobald Sprachplugin feststeht */


/* ==========================================================
   FINAL OVERRIDES
   Toggle dunkelblau + Pfeile ganz rechts
   ========================================================== */


/* ----------------------------------------------------------
   HAMBURGER / CLOSE
   Immer #1E3A5F – in jedem Zustand
   ---------------------------------------------------------- */

html body .smm-header .smm-toggle,
html body .smm-header .smm-toggle:hover,
html body .smm-header .smm-toggle:focus,
html body .smm-header .smm-toggle:focus-visible,
html body .smm-header .smm-toggle:active,
html body .smm-header .smm-toggle.is-active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    color: #1E3A5F !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* Hamburger + X */
html body .smm-header .smm-toggle svg,
html body .smm-header .smm-toggle:hover svg,
html body .smm-header .smm-toggle:focus svg,
html body .smm-header .smm-toggle:active svg,
html body .smm-header .smm-toggle.is-active svg {
    color: #1E3A5F !important;
    stroke: #1E3A5F !important;
    fill: none !important;
}


/* Linien explizit überschreiben */
html body .smm-header .smm-toggle svg line,
html body .smm-header .smm-toggle svg path,
html body .smm-header .smm-toggle svg polyline {
    stroke: #1E3A5F !important;
}


/* ----------------------------------------------------------
   DROPDOWN-ZEILEN
   ---------------------------------------------------------- */

.ssipm-mobile-menu .smm-item-row,
.ssipm-mobile-menu .smm-l2-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        52px !important;

    width: 100% !important;
}


/* Text nimmt die linke Spalte */
.ssipm-mobile-menu .smm-item-label,
.ssipm-mobile-menu .smm-l2-label {
    width: auto !important;
    min-width: 0 !important;

    grid-column: 1 !important;
}


/* Pfeil bekommt immer die rechte Spalte */
.ssipm-mobile-menu .smm-chevron-btn,
.ssipm-mobile-menu .smm-l2-chevron-btn {
    grid-column: 2 !important;

    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    margin: 0 !important;

    padding: 0 20px 0 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Pfeil selbst */
.ssipm-mobile-menu .smm-chevron {
    width: 20px !important;
    height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================
   MOBILE MENU TOGGLE
   Pink / Gold vollständig verhindern
   ========================================== */

.smm-toggle,
.smm-toggle:hover,
.smm-toggle:focus,
.smm-toggle:focus-visible,
.smm-toggle:active,
.smm-toggle.is-active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #1E3A5F !important;

    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Hamburger + Close immer SSIPM-Blau */
.smm-toggle svg,
.smm-toggle:hover svg,
.smm-toggle:focus svg,
.smm-toggle:active svg,
.smm-toggle.is-active svg {
    color: #1E3A5F !important;
    stroke: #1E3A5F !important;
    fill: none !important;
}

/* Einzelne SVG-Pfade ebenfalls erzwingen */
.smm-toggle svg path,
.smm-toggle svg line,
.smm-toggle svg polyline {
    stroke: #1E3A5F !important;
}

/* Kein Gold/Pink beim Antippen */
.smm-toggle *,
.smm-toggle:hover *,
.smm-toggle:focus *,
.smm-toggle:active *,
.smm-toggle.is-active * {
    -webkit-tap-highlight-color: transparent !important;
}