/* Related-Glossary-Teaser (sfc.com) – textbasierte Cards im SFC-Stil */

/* ---------------------------------------------------------------------------
   Sektion als hellgrauer Vollbreiten-Band, klar abgesetzt vom Content darüber.
   Der Inhalt bleibt im container-narrow (980px) → gleiche Achse wie der Text
   oben/unten. Negative Margins sprengen den Band über die volle Viewportbreite.
   --------------------------------------------------------------------------- */
.glossary-related {
    position: relative;
    margin-top: 70px;
    padding: 55px 0 65px;
    background-color: var(--color-lightgrey);
}
/* Abschräger oben links im SFC-Stil als Trenn-Akzent */
.glossary-related:before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 28vw;
    height: 40px;
    background-color: #fff;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 40px) 100%, 0% 100%);
}

/* Inhalts-Wrapper: 30px horizontaler Inset = identisch zur .c-Achse der
   Textsektionen darüber/darunter. Heading-Balken UND Karten-Außenkanten
   sitzen damit exakt auf derselben linken/rechten Achse wie der Content. */
.glossary-related__pad      { padding-left: 30px; padding-right: 30px; }

/* Überschrift – linker grüner Balken bündig zur Content-Achse */
.glossary-related__head     { margin-bottom: 34px; }
.glossary-related__heading  { margin: 0; position: relative; padding-left: 18px; }
.glossary-related__heading:before {
    content: "";
    position: absolute;
    left: -1px; top: 0;
    width: 4px; height: 100%;
    background: var(--color-green);
}

/* ---------------------------------------------------------------------------
   Card – weißer Kasten, grüner Akzent oben, Cut-Corner unten rechts.
   --------------------------------------------------------------------------- */
.glossary-related-card {
    position: relative;
    height: 100%;
    background: #fff;
    border-top: 4px solid var(--color-green);
    transition: transform .2s ease-out, box-shadow .2s ease-out;
    cursor: pointer;
}
.glossary-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.glossary-related-card__inner {
    padding: 28px 30px 38px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.glossary-related-card .title         { margin: 0 0 16px; }
.glossary-related-card .title a        { color: var(--color-green); text-decoration: none; }
.glossary-related-card:hover .title a  { color: var(--color-black); }

.glossary-related-card__teaser         { color: var(--color-black); font-size: 15px; line-height: 1.55; }
.glossary-related-card__teaser p       { margin: 0 0 .6em; }
.glossary-related-card__teaser p:last-child { margin-bottom: 0; }

.glossary-related-card__more           { margin: auto 0 0; padding-top: 20px; }
.glossary-related-card__more .btn      { position: relative; z-index: 2; }

/* Mobil: Cut-Corner weg, Karten gestapelt mit Abstand, etwas schmaleres Band */
@media (max-width: 767px) {
    .glossary-related                  { margin-top: 50px; padding: 40px 0 45px; }
    .glossary-related-card             { clip-path: none !important; }
    .glossary-related__grid .col + .col { margin-top: 20px; }
}