/* OMSAG Hub · Mega-Menüs (Panels im Header)
   Aus dem Child-Theme (megamenu.css) hierher umgezogen und für die Panels aus
   dem Hub erweitert. Gilt für die Panels aus dem Hub und für die alten
   GreenShift-Panels gleichermaßen. */

/* ==========================================================================
   OMS AG · Mega-Menue "Leistungen" (oms-mm)
   Gehoert an das Ende von megamenu.css im Child-Theme.
   Markup: Greenshift-Bloecke im Template-Teil "nav" (Klassen oms-mm*).
   Hinweis: Greenshift schreibt ID-Regeln (#gspb_...), die Klassenselektoren
   ueberstimmen. Layoutkritische Eigenschaften brauchen daher !important.
   ========================================================================== */

.oms-mm {
  --mm-green: #50aa3c;
  --mm-lime:  #aad337;
  --mm-ink:   #232730;
  --mm-muted: #69717d;
  --mm-line:  #e5e8e3;
  --mm-wash:  #f4f8f1;
}

/* Panel, gilt fuer ALLE drei Mega-Menues -------------------------------- */
.nav-item-wrapper .oms-mm-panel { padding: 0 !important; }
@media only screen and (min-width: 1025px) {
  .nav-item-wrapper .mega-container {
    border: 0 !important;
    border-radius: 0 0 24px 24px !important;
    /* Versatz >= Unschaerfe/2 + Streuung: der Schatten faellt nur nach unten
       und legt sich damit nie ueber die Hauptnavigation. */
    box-shadow: 0 26px 60px -18px rgba(25, 34, 29, .28) !important;
  }
  .nav-item-wrapper .oms-mm-panel { overflow: hidden !important; }
}

/* Greenshift-Raster in ein Grid ueberfuehren ------------------------------ */
.oms-mm {
  display: grid !important; grid-template-columns: minmax(0, 1fr) 340px !important;
  align-items: stretch !important; width: 100% !important; box-sizing: border-box !important;
}
.oms-mm > .gspb_row__content { display: contents !important; }
/* Box-Modell wie bei GreenShift: Mindesthöhen und Größen gelten inklusive Innenabstand */
.oms-mm, .oms-mm *, .oms-mm *::before, .oms-mm *::after { box-sizing: border-box; }
.oms-mm > .oms-mm__main,
.oms-mm > .oms-mm__aside { width: auto !important; max-width: none !important; flex: none !important; min-width: 0; }

/* Kopfbereich ------------------------------------------------------------ */
.oms-mm .oms-mm__main { padding: 40px 38px 38px !important; }
.oms-mm .oms-mm__eyebrow {
  margin: 0 0 7px; color: var(--mm-green); text-transform: uppercase;
  letter-spacing: .12em; font-size: 13px; font-weight: 700; line-height: 1.2;
}
.oms-mm .oms-mm__title {
  margin: 0 0 26px !important; font-size: clamp(25px, 2.2vw, 35px); line-height: 1.08;
  letter-spacing: -.025em; font-weight: 700; color: var(--mm-ink);
}

/* Kachelraster ----------------------------------------------------------- */
.oms-mm .oms-mm__grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important; width: 100% !important;
}
.oms-mm .oms-mm__grid > .gspb_row__content { display: contents !important; }
.oms-mm .oms-mm__cell {
  width: auto !important; max-width: none !important; flex: none !important;
  min-width: 0; padding: 0 !important; display: flex !important;
}

.oms-mm .oms-mm__card {
  position: relative !important; width: 100% !important; min-height: 132px;
  display: grid !important; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: start; column-gap: 14px; row-gap: 0; padding: 20px 38px 20px 20px !important;
  border: 1px solid var(--mm-line); border-radius: 17px; background: #fff;
  transition: background .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.oms-mm .oms-mm__card > .gspb-containerlink { position: absolute; inset: 0; z-index: 3; }
.oms-mm .oms-mm__card:hover { background: var(--mm-wash); border-color: rgba(80,170,60,.35); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(52,76,51,.08); }
.oms-mm .oms-mm__card.is-active { background: var(--mm-wash); border-color: rgba(80,170,60,.48); box-shadow: inset 0 0 0 1px rgba(80,170,60,.08); }

/* Halter als Pseudo-Element: Greenshift erzwingt die SVG-Groesse per ID + !important,
   deshalb liegt der runde Kasten nicht auf dem SVG-Block selbst. */
.oms-mm .oms-mm__card::before {
  content: ""; grid-column: 1; grid-row: 1 / 3; align-self: start;
  width: 42px; height: 42px; border-radius: 13px; background: #eaf5e6; transition: background .22s;
}
/* Symbol-Halter wird weiß, sobald die Kachel hellgrün wird */
.oms-mm .oms-mm__card:hover::before,
.oms-mm .oms-mm__card:focus-within::before,
.oms-mm .oms-mm__card.is-active::before { background: #fff; }
.oms-mm .oms-mm__ico {
  grid-column: 1; grid-row: 1 / 3; align-self: start; justify-self: center;
  position: static !important; z-index: 1; margin: 9px 0 0 !important;
  color: var(--mm-green); background: none !important; border: 0 !important;
}
.oms-mm .oms-mm__ico svg { display: block; }

.oms-mm .oms-mm__card-title {
  grid-column: 2; grid-row: 1; align-self: start;
  margin: 1px 0 7px !important; font-size: 16.5px; line-height: 1.18; font-weight: 650; color: var(--mm-ink);
}
.oms-mm .oms-mm__card-text {
  grid-column: 2; grid-row: 2; align-self: start;
  margin: 0 !important; color: var(--mm-muted); font-size: 13.5px; line-height: 1.4;
}

/* Pfeil oben rechts (dekorativ) */
.oms-mm .oms-mm__card::after {
  content: "\2197"; position: absolute; top: 18px; right: 17px; z-index: 2;
  font-size: 18px; line-height: 1; color: #9aa19a; transition: transform .2s, color .2s;
}
.oms-mm .oms-mm__card:hover::after { transform: translate(3px, -3px); color: var(--mm-green); }

/* Vorschauspalte --------------------------------------------------------- */
.oms-mm .oms-mm__aside {
  position: relative !important; overflow: hidden !important; isolation: isolate;
  background: #dfe6df; color: #fff; padding: 0 !important;
}
.oms-mm .oms-mm__shot {
  position: absolute !important; inset: 0 !important; z-index: 0;
  width: auto !important; height: auto !important; margin: 0 !important;
  opacity: 0; transition: opacity .45s cubic-bezier(.2,.75,.2,1);
}
.oms-mm .oms-mm__shot.is-shown { opacity: 1; }
.oms-mm .oms-mm__shot img {
  width: 100% !important; max-width: none !important; height: 100% !important;
  object-fit: cover; display: block;
}
.oms-mm .oms-mm__aside::before {
  content: "\2197"; position: absolute; z-index: 2; bottom: 26px; right: 26px;
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px;
  color: #fff; background: rgba(35,39,48,.28); border: 1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  box-shadow: 0 8px 28px rgba(20,25,22,.18); font-size: 25px; line-height: 1;
}
/* Zwischenbreite: zwei Spalten ------------------------------------------- */
@media only screen and (max-width: 1320px) and (min-width: 1025px) {
  .oms-mm { grid-template-columns: minmax(0, 1fr) 300px !important; }
  .oms-mm .oms-mm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .oms-mm .oms-mm__main { padding: 32px 28px 30px !important; }
  .oms-mm .oms-mm__card { min-height: 120px; }
}

/* Mobil (<=1024px): helle Akkordeon-Navigation ---------------------------- */
@media only screen and (max-width: 1024px) {

  /* --- Navigationsflaeche hell --- */
  .oms-navbar { background: #fff !important; color: #232730 !important; }
  /* Die drei Menuepunkte sind im Builder unterschiedlich aufgebaut (einer ohne
     .nav-label-container, bei einem liegt das Label eine Ebene tiefer). Deshalb
     alle Textbloecke der Navigation einfaerben und den Mega-Inhalt weiter unten
     wieder auf seine eigenen Werte setzen. */
  .oms-navbar .gspb_text {
    color: #232730 !important; font-size: 24px !important;
    padding-left: 0 !important; left: auto !important;
  }
  /* Einheitlicher Einzug und Trennlinie fuer alle fuenf Zeilen */
  .oms-navbar > div:has(> .nav-item-wrapper) > .gspb_container {
    padding-left: 20px !important; padding-right: 18px !important;
    border-bottom: 1px solid #eef0ec;
  }
  body.navbar-open .oms-header { background: #fff !important; }
  body.navbar-open .oms-header .btn-start-projekt { color: #232730 !important; border-color: #232730 !important; }
  body.navbar-open .oms-header .gspb_image.lightmode { display: block !important; }
  body.navbar-open .oms-header .gspb_image.darkmode  { display: none !important; }
  .oms-navbar .nav-socials svg path { fill: #232730 !important; }
  .oms-navbar > div.nav-socials.hidden { display: flex !important; }

  /* --- Zeilen --- */
  .oms-navbar .nav-item,
  .oms-navbar .nav-item.active { position: static !important; background: transparent !important; }
  /* Zeile bleibt beim Aufklappen oben stehen, dadurch immer erreichbar zum Schliessen */
  .oms-navbar .nav-item.active .nav-label-container {
    position: sticky; top: 0; z-index: 5; background: #fff;
  }

  /* --- Plus wird animiert zum Minus --- */
  .oms-navbar .chevron.mobile svg path { fill: #232730 !important; transform-origin: 50% 50%;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .22s ease; }
  .oms-navbar .nav-item.active .chevron.mobile svg path:nth-child(2) { opacity: 0; transform: rotate(90deg); }

  /* --- Mega als Akkordeon statt Vollbild --- */
  .nav-item-wrapper .nav-item .mega { display: none !important; }
  .nav-item-wrapper .nav-item.active .mega {
    display: block !important; position: static !important;
    max-height: none !important; padding: 0 0 12px 15px !important;
    animation: omsMegaAcc .28s cubic-bezier(.22,.61,.36,1) both;
  }
  .nav-item-wrapper .mega-container {
    position: static !important; transform: none !important;
    width: auto !important; max-width: none !important;
    background: transparent !important; box-shadow: none !important;
    border: 0 !important; border-radius: 0 !important; overflow: visible !important;
  }

  /* --- Leistungs-Kacheln hell, wie auf dem Desktop --- */
  .oms-mm { display: block !important; }
  .oms-mm .oms-mm__main { padding: 4px 0 14px !important; }
  .oms-navbar .mega .oms-mm__eyebrow { font-size: 11.5px !important; letter-spacing: .14em; color: var(--mm-green) !important; }
  .oms-navbar .mega .oms-mm__title { margin: 6px 0 14px !important; font-size: 20px !important; color: var(--mm-ink) !important; }
  .oms-navbar .mega .oms-mm__card-text { font-size: 13.5px !important; color: var(--mm-muted) !important; }

  .oms-mm .oms-mm__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .oms-mm .oms-mm__card {
    min-height: 0; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto;
    align-items: center; column-gap: 14px; padding: 14px 40px 14px 14px !important; border-radius: 15px;
    background: #fff; border: 1px solid var(--mm-line);
  }
  /* ohne Vorschauspalte gibt es keinen aktiven Zustand, alle Kacheln gleich */
  .oms-mm .oms-mm__card.is-active { background: #fff; border-color: var(--mm-line); box-shadow: none; }
  .oms-mm .oms-mm__card:hover,
  .oms-mm .oms-mm__card:active {
    background: var(--mm-wash); border-color: rgba(80,170,60,.35); transform: none; box-shadow: none;
  }
  .oms-mm .oms-mm__card::before {
    grid-row: 1; align-self: center; width: 42px; height: 42px; border-radius: 12px; background: #eaf5e6;
  }
  .oms-mm .oms-mm__card.is-active::before { background: #eaf5e6; }
  .oms-mm .oms-mm__card:hover::before,
  .oms-mm .oms-mm__card:active::before { background: #fff; }
  .oms-mm .oms-mm__ico { grid-row: 1; align-self: center; margin: 0 !important; color: var(--mm-green); }
  .oms-navbar .mega .oms-mm__card-title { grid-row: 1; margin: 0 !important; font-size: 16px !important; line-height: 1.25; color: var(--mm-ink) !important; }
  .oms-mm .oms-mm__card-text { display: none; }
  .oms-mm .oms-mm__card::after { top: 50%; right: 16px; transform: translateY(-50%); font-size: 17px; color: #9aa19a; }
  .oms-mm .oms-mm__card:hover::after { transform: translateY(-50%); color: var(--mm-green); }

  .oms-mm .oms-mm__aside { display: none !important; }
}
@keyframes omsMegaAcc { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav-item-wrapper .nav-item.active .mega { animation: none !important; }
}

/* Abdunkeln + Weichzeichnen des Seiteninhalts bei offenem Mega-Menue ------- */
.oms-mega-backdrop {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  /* Oberkante = Unterkante der Kopfzeile, per JS gesetzt. Die Menueleiste
     selbst wird dadurch nie ueberdeckt und bleibt unveraendert hell. */
  top: var(--oms-mega-top, 100px);
  background: rgba(24, 29, 27, .18);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
}
@media only screen and (max-width: 1024px) { .oms-mega-backdrop { display: none; } }
@media only screen and (min-width: 1025px) {
  body.oms-mega-open .oms-mega-backdrop { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) { .oms-mega-backdrop { transition: none; } }

/* Menuepunkte mit Pfeil brauchen 10px weniger Aussenabstand, sonst stehen sie
   weiter auseinander als die ohne Pfeil (Pfeilbreite + Innenabstand). */
@media only screen and (min-width: 1025px) {
  .oms-navbar .nav-item-wrapper { margin-right: 5px !important; }
}

/* Aktiver / gehoverter Menuepunkt ---------------------------------------- */
.oms-navbar .nav-item .item-label { transition: color .18s ease; }
.oms-navbar .nav-item .chevron svg path { transition: stroke .18s ease; }
@media only screen and (min-width: 1025px) {
  .nav-item-wrapper:hover .nav-item .item-label,
  .nav-item-wrapper.is-current .nav-item .item-label,
  .oms-navbar a:hover .item-label { color: #50aa3c !important; }
  .nav-item-wrapper:hover .nav-item .chevron svg path,
  .nav-item-wrapper.is-current .nav-item .chevron svg path { stroke: #50aa3c !important; }
}

/* Aufbau-Animation ------------------------------------------------------- */
@media only screen and (min-width: 1025px) {
  .nav-item-wrapper:hover .mega-container {
    animation: omsMegaIn .24s cubic-bezier(.22, .61, .36, 1) both;
  }
  .nav-item-wrapper:hover .oms-mm__card,
  .nav-item-wrapper:hover .oms-mm__aside,
  .nav-item-wrapper:hover .oms-mm__eyebrow,
  .nav-item-wrapper:hover .oms-mm__title {
    animation: omsMegaRise .22s cubic-bezier(.22, .61, .36, 1) both;
  }
  .nav-item-wrapper:hover .oms-mm__eyebrow { animation-delay: .04s; }
  .nav-item-wrapper:hover .oms-mm__title   { animation-delay: .06s; }
  .nav-item-wrapper:hover .oms-mm__aside   { animation-delay: .06s; }
  .nav-item-wrapper:hover .oms-mm__card--1 { animation-delay: .08s; }
  .nav-item-wrapper:hover .oms-mm__card--2 { animation-delay: .10s; }
  .nav-item-wrapper:hover .oms-mm__card--3 { animation-delay: .12s; }
  .nav-item-wrapper:hover .oms-mm__card--4 { animation-delay: .10s; }
  .nav-item-wrapper:hover .oms-mm__card--5 { animation-delay: .12s; }
  .nav-item-wrapper:hover .oms-mm__card--6 { animation-delay: .14s; }

  /* War beim Betreten schon ein Menue offen, baut sich dieses hier nicht neu
     auf: die Flaeche bleibt stehen, nur der Inhalt wechselt. Die Markierung
     sitzt bewusst am Menuepunkt und nicht am <body>, eine Klasse, die sich
     waehrend des Hoverns aendert, wuerde die laufende Animation neu starten. */
  .nav-item-wrapper.is-instant:hover .mega-container { animation: none; }
  .nav-item-wrapper.is-instant:hover .oms-mm__card,
  .nav-item-wrapper.is-instant:hover .oms-mm__aside,
  .nav-item-wrapper.is-instant:hover .oms-mm__eyebrow,
  .nav-item-wrapper.is-instant:hover .oms-mm__title {
    animation: omsMegaFade .14s ease both; animation-delay: 0s;
  }
}
@keyframes omsMegaIn   { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
@keyframes omsMegaRise { from { opacity: 0; translate: 0 8px; }   to { opacity: 1; translate: 0 0; } }
@keyframes omsMegaFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .nav-item-wrapper:hover .mega-container,
  .nav-item-wrapper:hover .oms-mm__card,
  .nav-item-wrapper:hover .oms-mm__aside,
  .nav-item-wrapper:hover .oms-mm__eyebrow,
  .nav-item-wrapper:hover .oms-mm__title { animation: none !important; }
}

/* Klick- und Fokusrahmen in der Kopfzeile und im Mega-Menue --------------- */
.oms-header a, .oms-header button, .oms-header [tabindex],
.oms-header .gspb-containerlink, .oms-navbar a, .oms-navbar [tabindex] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.oms-header :is(a, button, [tabindex], .gspb-containerlink):is(:focus, :focus-visible, :active),
.oms-navbar :is(a, button, [tabindex], .gspb-containerlink):is(:focus, :focus-visible, :active) {
  outline: 0 !important; outline-offset: 0 !important; box-shadow: none !important;
  background-color: transparent !important;
}
/* Ersatz fuer die Tastaturbedienung: gruen statt Rahmen */
.oms-header .nav-item-wrapper:focus-within .item-label { color: #50aa3c !important; }
.oms-mm .oms-mm__card:focus-within { background: var(--mm-wash); border-color: rgba(80,170,60,.48); }

/* ── Mobile Navigation: Standort und Kopfzeilen ───────────────────────────
   Auf schmalen Schirmen klappt das Leistungsmenue als Akkordeon auf. Dort
   fehlten zwei Dinge: der aktive Menuepunkt war nicht zu erkennen, und die
   Kopfzeilen des Mega-Menues kosteten nur Platz.
   ───────────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 1024px) {

  /* Oberpunkt der aktuellen Seite gruen, nur die Farbe, sonst nichts.
     Kein stroke: das Plus-Zeichen ist auf Mobil eine Flaeche, eine zusaetzliche
     Kontur wuerde es dicker erscheinen lassen. */
  .nav-item-wrapper.is-current .nav-item .item-label { color: #50aa3c !important; }
  .nav-item-wrapper.is-current .nav-item .chevron.mobile svg path { fill: #50aa3c !important; }

  /* Kachel der aktuellen Leistungsseite markieren. is-here setzt das Skript
     einmalig anhand des Pfades, im Gegensatz zu is-active, das beim Hovern
     wandert und auf Mobil bewusst neutralisiert ist. */
  .oms-mm .oms-mm__card.is-here {
    background: var(--mm-wash) !important;
    border-color: rgba(80, 170, 60, .5) !important;
    box-shadow: inset 0 0 0 1px rgba(80, 170, 60, .12) !important;
  }
  .oms-navbar .mega .oms-mm__card.is-here .oms-mm__card-title { color: #3d8b28 !important; }
  .oms-mm .oms-mm__card.is-here .oms-mm__ico { color: #3d8b28 !important; }
  .oms-mm .oms-mm__card.is-here::before { background: #dcefd4 !important; }
  /* Der Pfeil rechts weicht dem Standort-Punkt */
  .oms-mm .oms-mm__card.is-here::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #50aa3c; right: 18px; }

  /* Kopfzeilen des Mega-Menues entfallen auf Mobil */
  .oms-navbar .mega .oms-mm__eyebrow,
  .oms-navbar .mega .oms-mm__title { display: none !important; }
}

/* ==========================================================================
   Panels aus dem OMSAG Hub
   Gleiche Bausteine wie oben, dazu Einleitung, Mehr-Link, Label und das
   Linklisten-Panel (OMSAG, Wissen). Das Theme setzt Bilder und SVGs im
   Mega-Menü pauschal auf 75 px; die Regeln hier stellen die echten Größen her.
   ========================================================================== */

.oms-mm .oms-mm__ico svg {
  width: 23px !important; height: 23px !important; max-width: none !important; margin: 0 !important; display: block;
}
.oms-mm[data-ohub-nav] .oms-mm__ico { margin: 9px 0 0 !important; }
@media only screen and (max-width: 1024px) {
  .oms-mm[data-ohub-nav] .oms-mm__ico { margin: 0 !important; }
}
.oms-mm .oms-mm__lead {
  margin: -14px 0 24px; max-width: 620px; color: var(--mm-muted); font-size: 15px; line-height: 1.5;
}
.oms-mm .oms-mm__badge {
  display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 99px; vertical-align: 2px;
  background: var(--mm-green); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3;
}
.oms-mm .oms-mm__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  color: var(--mm-ink); font-size: 14.5px; font-weight: 650; text-decoration: none;
}
.oms-mm .oms-mm__more span { color: var(--mm-green); transition: transform .2s; }
.oms-mm .oms-mm__more:hover { color: var(--mm-green); }
.oms-mm .oms-mm__more:hover span { transform: translateX(3px); }
.oms-mm.oms-mm--cols2 .oms-mm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* Linklisten-Panel ------------------------------------------------------- */
.oms-mm.oms-mm--links {
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) !important;
  column-gap: 34px; padding: 34px 38px 32px; background: #fff;
}
.oms-mm--links .oms-mm__intro { padding-top: 6px; }
.oms-mm--links .oms-mm__title {
  margin: 0 0 10px !important; font-size: 30px; line-height: 1.08; letter-spacing: -.025em; font-weight: 700; color: var(--mm-ink);
}
.oms-mm--links .oms-mm__lead { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--mm-muted); }
.oms-mm--links .oms-mm__links {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; align-content: start;
}
.oms-mm .oms-mm__link {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; column-gap: 14px;
  padding: 10px 12px 10px 10px; border-radius: 16px; color: inherit; text-decoration: none;
  transition: background .2s, transform .2s;
}
.oms-mm .oms-mm__link:hover, .oms-mm .oms-mm__link:focus-visible { background: var(--mm-wash); transform: translateY(-1px); }
.oms-mm .oms-mm__thumb {
  width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: #eef2ec; flex: none;
}
.oms-mm .oms-mm__thumb img {
  width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; display: block; margin: 0 !important;
}
.oms-mm .oms-mm__thumb--ico { background: #eaf5e6; color: var(--mm-green); transition: background .2s; }
.oms-mm .oms-mm__link:hover .oms-mm__thumb--ico,
.oms-mm .oms-mm__link:focus-visible .oms-mm__thumb--ico,
.oms-mm .oms-mm__link[aria-current="page"] .oms-mm__thumb--ico { background: #fff; }
/* Einträge mit Foto: Bild bündig links, oben und unten */
.oms-mm .oms-mm__link--img {
  grid-template-columns: 78px minmax(0, 1fr); align-items: stretch; min-height: 78px; padding: 0 12px 0 0;
}
.oms-mm .oms-mm__link--img .oms-mm__thumb { width: 78px; height: 100%; min-height: 78px; border-radius: 16px; }
.oms-mm .oms-mm__link--img .oms-mm__lt { align-self: center; padding: 8px 0; }
.oms-mm .oms-mm__thumb--ico svg { width: 24px !important; max-width: none !important; height: 24px !important; margin: 0 !important; }
.oms-mm .oms-mm__lt { min-width: 0; display: grid; gap: 3px; }
.oms-mm .oms-mm__link-title { font-size: 16px; line-height: 1.2; font-weight: 650; color: var(--mm-ink); transition: color .2s; }
.oms-mm .oms-mm__link-text { font-size: 13.5px; line-height: 1.4; color: var(--mm-muted); }
.oms-mm .oms-mm__link:hover .oms-mm__link-title { color: var(--mm-green); }
.oms-mm .oms-mm__link[aria-current="page"] { background: var(--mm-wash); }
.oms-mm .oms-mm__link[aria-current="page"] .oms-mm__link-title { color: #3d8b28; }

@media only screen and (max-width: 1320px) and (min-width: 1025px) {
  .oms-mm.oms-mm--links { grid-template-columns: 210px minmax(0, 1fr) !important; padding: 30px 28px; column-gap: 22px; }
  .oms-mm--links .oms-mm__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (min-width: 1025px) {
  .nav-item-wrapper:hover .oms-mm__intro,
  .nav-item-wrapper:hover .oms-mm__link { animation: omsMegaRise .22s cubic-bezier(.22, .61, .36, 1) both; }
  .nav-item-wrapper:hover .oms-mm__link:nth-child(1) { animation-delay: .06s; }
  .nav-item-wrapper:hover .oms-mm__link:nth-child(2) { animation-delay: .08s; }
  .nav-item-wrapper:hover .oms-mm__link:nth-child(3) { animation-delay: .10s; }
  .nav-item-wrapper:hover .oms-mm__link:nth-child(n+4) { animation-delay: .12s; }
  .nav-item-wrapper.is-instant:hover .oms-mm__intro,
  .nav-item-wrapper.is-instant:hover .oms-mm__link { animation: omsMegaFade .14s ease both; animation-delay: 0s; }
}

/* Mobil: dieselbe helle Kachelliste wie bei den Leistungen */
@media only screen and (max-width: 1024px) {
  .oms-mm.oms-mm--links { display: block !important; padding: 4px 0 14px; background: transparent; }
  .oms-mm--links .oms-mm__intro { display: none; }
  .oms-mm--links .oms-mm__links { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .oms-mm .oms-mm__link {
    grid-template-columns: 42px minmax(0, 1fr); padding: 14px 48px 14px 14px; border: 1px solid var(--mm-line);
    border-radius: 15px; background: #fff; transform: none !important;
  }
  .oms-mm .oms-mm__link::after {
    content: "\2197"; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font-size: 17px; line-height: 1; color: #9aa19a;
  }
  .oms-mm .oms-mm__link:hover { background: var(--mm-wash); border-color: rgba(80,170,60,.35); }
  .oms-mm .oms-mm__thumb { width: 42px; height: 42px; border-radius: 12px; }
  .oms-mm .oms-mm__thumb--ico svg { width: 23px !important; height: 23px !important; }
  .oms-mm .oms-mm__link--img { grid-template-columns: 70px minmax(0, 1fr); min-height: 72px; padding: 0 48px 0 0; overflow: hidden; }
  .oms-mm .oms-mm__link--img .oms-mm__thumb { width: 70px; height: 100%; min-height: 70px; border-radius: 0; }
  .oms-mm .oms-mm__link--img .oms-mm__lt { padding: 10px 0; }
  .oms-navbar .mega .oms-mm__link-title { font-size: 16px !important; line-height: 1.25; color: var(--mm-ink) !important; }
  .oms-mm .oms-mm__link-title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .oms-mm .oms-mm__link-text { display: none; }
  .oms-mm .oms-mm__lead, .oms-mm .oms-mm__more { display: none; }
  .oms-mm .oms-mm__link[aria-current="page"] { border-color: rgba(80, 170, 60, .5); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item-wrapper:hover .oms-mm__intro, .nav-item-wrapper:hover .oms-mm__link { animation: none !important; }
}