/*
 * Glossary popover styling, mirrored from theme-ciborius-security/res/css/style.css
 * (lines 174-470) on 2026-08-21. Same class names as security.de so this can later
 * move into a shared module without a rewrite: sr-glossary-link, sr-popup,
 * sr-popup-top-left and so on.
 *
 * One fix against the original: the rule for "strong a.sr-glossary-link" was missing
 * the comma before its second selector, which turned it into a descendant selector
 * that matches nothing. Reported for security.de as a separate item.
 */

.et_pb_post .post-content a.sr-glossary-link,
a.sr-glossary-link,
span.sr-glossary-link-highlight.sr-glossary-link,
.et_pb_post .post-content span.sr-glossary-link.sr-glossary-link-highlight
{
  color:                   inherit !important;
  outline-offset:          0;
  /*text-decoration:         underline dotted #006CA6 !important;
  -webkit-text-decoration: underline dotted #006CA6 !important;*/
}


h1 a.sr-glossary-link,
h2 a.sr-glossary-link,
h3 a.sr-glossary-link,
h1 span.sr-glossary-link.sr-glossary-link-highlight,
h2 span.sr-glossary-link.sr-glossary-link-highlight,
h3 span.sr-glossary-link.sr-glossary-link-highlight,
.et_pb_post .post-content h1 .sr-glossary-link,
.et_pb_post .post-content h2 .sr-glossary-link,
.et_pb_post .post-content h3 .sr-glossary-link,
.et_pb_post .post-content h1 span.sr-glossary-link.sr-glosary-link-highlight,
.et_pb_post .post-content h2 span.sr-glossary-link.sr-glosary-link-highlight,
.et_pb_post .post-content h3 span.sr-glossary-link.sr-glosary-link-highlight
{
  text-decoration: none !important;
}


strong a.sr-glossary-link,
.et_pb_post .post-content strong a.sr-glossary-link
{
  color: inherit !important;
}


.et_pb_post .post-content a.sr-glossary-link:hover,
a.sr-glossary-link:hover,
.et_pb_post .post-content span.sr-glossary-link.sr-glossary-link-highlight:hover,
span.sr-glossary-link.sr-glossary-link-highlight:hover
{
  cursor: pointer !important;
  color:  #006CA6 !important;
}


.sr-popup
{
  min-width:       380px;
  min-height:      210px;
  max-width:       380px;
  /* 332px statt 210px: bei 210 blieben von den 16 live verlinkten Eintraegen
     mit Auszug nur 55-86 Prozent des Textes sichtbar - ein abgeschnittener
     Satz, kein Teaser. 332px fasst den laengsten (Qualitaetsmanagement,
     429 Zeichen). Gemessen 2026-08-21 ueber 33 Seiten. */
  max-height:      332px;
  background:      #FFF;
  position:        absolute;
  z-index:         1000000;
  box-shadow:      0 30px 90px -20px rgba(0, 0, 0, 0.3);
  padding:         0;
  font-size:       14px;
  line-height:     20px;
  min-width:       300px;
  border-radius:   2px;
  width:           320px;
  margin:          0;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  border-color:    rgba(0, 0, 0, .15);
  border-style:    solid;
  border-width:    1px;
}


.sr-popup > div
{
  overflow:      hidden;
  margin:        1rem;
  margin-top:    .5em;
  flex:          1 1 auto;
  cursor:        pointer;
  text-overflow: ellipsis;
  position:      relative;
}


.sr-popup > div:after
{
  
  content:        "";
  position:       absolute;
  bottom:         0;
  left:           0;
  width:          100%;
  height:         2rem;
  background:     linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
}


.sr-popup p,
.sr-popup > div
{
  font-weight: 300;
  font-size:   1rem;
  line-height: 1.4;
}


@keyframes sr-fade-in-up
{
  
  from
  {
    opacity:   0;
    transform: translate3d(0, 38%, 0);
  }
  
  to
  {
    opacity:   1;
    transform: translate3d(0, 0, 0);
  }
}


.sr-animated
{
  animation-duration:        var(--sr-animate-duration, 1s);
  animation-fill-mode:       both;
  animation-timing-function: ease-in-out;
  animation-fill-mode:       forwards;
  animation-delay:           150ms;
}


.sr-fade-in-up
{
  animation-name: sr-fade-in-up;
  opacity:        0;
}


.sr-animated-fastest
{
  animation-duration: calc(var(--sr-animate-duration, 1s) / 3);
}


.sr-animated-faster
{
  animation-duration: calc(var(--sr-animate-duration, 1s) / 2);
}


.sr-animated-fast
{
  animation-duration: calc(var(--sr-animate-duration, 1s) * 0.8);
}


.sr-animated-slow
{
  animation-duration: calc(var(--sr-animate-duration, 1s) * 2);
}


.sr-animated-slower
{
  animation-duration: calc(var(--sr-animate-duration, 1s) * 3);
}


@media print, (prefers-reduced-motion: reduce)
{
  .sr-animated
  {
    animation-duration:        1ms !important;
    transition-duration:       1ms !important;
    animation-iteration-count: 1 !important;
  }
  
  .sr-animated[class*='Out']
  {
    opacity: 0;
  }
}


.sr-section.sr-section-glossary-page
{
  min-height:  100vh;
  padding-top: 60px !important;
}


.sr-section.sr-section-glossary-page .sr-row
{
  max-width: 80%;
}


.sr-section.sr-section-glossary-page .sr-row p
{
  font-weight: 400;
}


.sr-section.sr-section-glossary-page .et_pb_section
{
  padding-left:  0;
  padding-right: 0;
}


.sr-popup:before
{
  content:       attr(data-title);
  flex:          0 0 auto;
  padding-left:  1rem;
  /* 2.75rem statt 1rem: rechts sitzt das Schliessen-X (44px). Ohne den Platz
     laeuft ein langer Titel darunter. Stand vorher in einer @media (hover: none)
     -- das X ist jetzt auch mit Maus da, der Platz muss es also auch sein. */
  padding-right: 2.75rem;
  padding-top:   1rem;
}


.sr-popup:after
{
  content:      '';
  width:        1rem;
  height:       1rem;
  background:   inherit;
  position:     absolute;
  transform:    translateX(var(--sr-translate-x, 0)) translateY(var(--sr-translate-y, 0)) rotate(45deg);
  border-style: inherit !important;
  border-color: inherit !important;
  box-shadow:   none !important;
}


.sr-popup-top-left:after
{
  left:             -1px;
  top:              1rem;
  --sr-translate-x: -50%;
  border-width:     0 0 1px 1px;
}


.sr-popup-bottom-left:after
{
  bottom:           1rem;
  left:             -1px;
  --sr-translate-x: -50%;
  border-width:     0 0 1px 1px;
}


.sr-popup-top-right:after
{
  top:              1rem;
  right:            -1px;
  --sr-translate-x: 50%;
  border-width:     1px 1px 0 0;
}


.sr-popup-bottom-right:after
{
  bottom:           1rem;
  right:            -1px;
  --sr-translate-x: 50%;
  border-width:     1px 1px 0 0;
}


.sr-popup-up-left:after
{
  top:              -1px;
  left:             1rem;
  border-width:     1px 0 0 1px;
  --sr-translate-y: -50%;
}


.sr-popup-up-right:after
{
  top:              -1px;
  right:            1rem;
  border-width:     1px 0 0 1px;
  --sr-translate-y: -50%;
}


/* Popover an einem Badge: Pfeil mittig unter oder ueber dem Kreis.

   Die Varianten darueber setzen den Pfeil 1rem ab der Popover-Kante. Das passt