/* Popup Maker */
.pum-container .blog-recent .post-header {
    width: 80%!important;
    left: 10%!important;
}
.pum-container .blog-recent .col {
    padding: 20px 0px !important;
}
.pum-container .post-header h2 {
    font-size: 1.15rem!important;
    line-height: 1.2!important;
    text-align: left!important;
}

.pum-content {
    overflow-y: scroll!important;
    overflow-x: hidden!important;
	scroll-snap-type: y mandatory;
	scroll-snap-type: mandatory;
	scrollbar-color: orange blue; /** Firefox **/
	height: 70vh;
}
.pum-content::-webkit-scrollbar {
  width: 1em;
  background-color: hsl(0,0%,70%);
}
.pum-content::-webkit-scrollbar-thumb {
  background-color: orange;
}

@media only screen and (max-width: 599px) {
    .pum-container {
        top: 150px!important;
    }
}

/* Vertical Tabs */
.aiace-vertical-tabs {
    padding: 4rem 0;
}



/* Popup Maker + Salient blog-recent: Overlay-Link wiederherstellen (falls Overlay NICHT deaktiviert ist) */
.pum-content .blog-recent {text-align: center !important;}

.pum-content .blog-recent .col > a[aria-label] {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}
.pum-content .blog-recent .post-header {
  position: relative;
  z-index: 2;
text-align: center !important;
}


/* Popup-Mode: Titel-Link wie normaler Titel */
.pum-content .blog-recent .post-header .title a {
  color: inherit;
  text-decoration: none;
}


/* Popup Maker */
.pum-container .blog-recent .post-header {
    width: 80%!important;
    left: 10%!important;
    margin: 0 auto !Important;
    text-align: center;
}



.pum-content .blog-recent .col { position: relative; margin-bottom: 2%;}

.pum-container .post-header h2 {
    font-size: 1.15rem!important;
    line-height: 1.2!important;
    text-align: center!important;
    display: block !important;
}

/* 1) Stabilen Hover-Trigger + Puffer einbauen */
.pum-container .post-header {
  position: relative;
  padding-bottom: 12px;   /* >= absolute Y-Verschiebung */
  margin-bottom: -12px;   /* kompensiert das Padding ohne Layout-Shift */
}

/* 2) Titel animierbar machen */
.pum-container .post-header .title {
  font-size: 1.15rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  display: block !important;
  transform-origin: 50% 100% !important;
  transition: transform .18s ease, color .18s ease !important;
  will-change: transform !important;
  backface-visibility: hidden;
text-align: left !Important;
}

/* 3) Hover/Fokus -> gleicher Effekt wie vorher, aber ohne Flimmern */
.pum-container .post-header:hover .title,
.pum-container .post-header:focus-within .title,
.pum-container .blog-recent .col:hover .post-header .title { /* falls Overlay-Link aktiv */
  color: #004097 !important;
  transform: scale(1.1) translateY(-5px) !important;
}

/* Optional: Link-Verhalten im Titel */
.pum-container .post-header .title a {
  color: inherit;
  text-decoration: none;
  display: inline-block;

}


/* Lass den äußeren Container nicht die Scrollbar „schlucken“ */
.pum-container { 
  overflow: visible !important;
}

/* Inhalt begrenzen & wirklich scrollbar machen */
.pum-container .pum-content.popmake-content {
  max-height: min(70vh, 70svh, 70dvh); /* flexibler als height */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;    /* iOS smooth scroll */
  overscroll-behavior: contain;         /* Scroll nur im Popup */
  scroll-snap-type: y proximity;        /* statt doppelt/„mandatory“ */
}

/* Falls deine PUM-Version zusätzlich einen Wrapper .pum-scrollable einzieht */
.pum-container .pum-scrollable {
  max-height: min(70vh, 70svh, 70dvh);
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Optional: Snap-Punkte für deine Cards */
.pum-container .blog-recent .col { 
  scroll-snap-align: start; 
}

/* (Optional) auf Touch-Geräten Gesten explizit erlauben */
.pum-container { 
  touch-action: pan-y; 
}



.pum-content .blog-recent .post-header .meta {
  transition: opacity .2s ease, visibility .2s ease;
}

/* 1) Wenn der Titel (mit/ohne Link) Hover/Focus hat */
.pum-content .blog-recent .post-header:has(.title:hover, .title:focus, .title a:hover, .title a:focus, .title a:focus-visible) .meta {
  opacity: 0;
  visibility: hidden; /* statt display:none -> kein Layout-Shift */
}

.pum-content .news-column .blog-recent .col:hover .meta {
  opacity: 0;
  visibility: hidden; /* statt display:none -> kein Layout-Shift */
}

.pum-content .news-column .blog-recent .col:hover .post-header .title {
color: #004097 !important;
}

/* 2) Salient-Overlay-Anchor (ganze Karte klickbar): wenn der Link oben drüber aktiv ist */
.pum-content .blog-recent .col:has(> a[aria-label]:is(:hover, :focus, :focus-visible)) .post-header .meta {
  opacity: 0;
  visibility: hidden;
}

.pum-content .news-column .blog-recent .col {margin-bottom: 20px !important;}




@media only screen and (max-width: 599px) {
    .pum-container {
        top: 150px!important;
    }
}