/* Effektgruppe: buttons/links; Reihenfolge in inc/assets.php. */

/* Link Styles*/

  .link-zoom {
    position: relative;
    align-items: center;
    text-decoration: none; /* Kein Unterstrich */
    will-change: transform;
    transition: transform 0.3s ease; /* Sanfte Zoom-Animation */
}

/* Entfernt die Unterstreichung auch für das <a>-Element im Inneren */
.link-zoom a {
    text-decoration: none;
}

/* Hover-Effekt mit Zoom und Verschiebung nach rechts */
.link-zoom:is(:hover, :focus-within, .is-active) {
    transform: scale(1.03) translateX(7px); /* Vergrößerung um 3% und 5px nach rechts */
}

.link-no-underline a {
    text-decoration: none;
}

/* Basisstil für den Link */
.link-with-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: black;
}

/* Pfeil als SVG-Hintergrund */
.link-with-arrow::after {
    content: "";
    display: inline-block;
    width: 40px; /* Standardbreite */
    height: 40px; /* Standardhöhe */
	/* stroke und fillfarbe angeben bspw weiß: %23FFFFFF */
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="69" height="26" viewBox="0 0 69 26" fill="none"><path d="M55 14H5C4 14 3 13 3 12.5C3 12 4 11 5 11H55L48 4C47 3 47 2 48 1C49 0 50 0 51 1L61 11C61.5 11.5 62 12 62 12.5C62 13 61.5 13.5 61 14L51 24C50 25 49 25 48 24C47 23 47 22 48 21L55 14Z" fill="%23000000" stroke="%23000000" stroke-width="3"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 10px; /* Weiter nach rechts */
    margin-top: 25px; /* Weiter nach unten */
 
    transition: transform 0.3s ease-out, width 0.3s ease-out;
}

/* Hover-Effekt */
.link-with-arrow:is(:hover, :focus-within, .is-active)::after {
    transform: translateX(20px);
}

/* Basisstil für den weißen Link */
.link-with-arrow.white {
    color: #fff; /* Weiß für den Text */
}

/* Weißer Pfeil als SVG-Hintergrund */
.link-with-arrow.white::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="69" height="26" viewBox="0 0 69 26" fill="none"><path d="M55 14H5C4 14 3 13 3 12.5C3 12 4 11 5 11H55L48 4C47 3 47 2 48 1C49 0 50 0 51 1L61 11C61.5 11.5 62 12 62 12.5C62 13 61.5 13.5 61 14L51 24C50 25 49 25 48 24C47 23 47 22 48 21L55 14Z" fill="%23FFFFFF" stroke="%23FFFFFF" stroke-width="3"/></svg>');
}

/* Der Trigger-Container */
.hover-underline {
    cursor: pointer;
    text-decoration: none !important;
}

/* Ziel: .kb-adv-text-inner ODER der Advanced Heading Block (wenn kein Icon drin ist) */
.hover-underline .kb-adv-text-inner,
.hover-underline .wp-block-kadence-advancedheading:not(:has(.kb-svg-icon-wrap)) {
    position: relative;
    display: inline-block; /* Sorgt dafür, dass die Linie nur so lang wie der Text ist */
    color: inherit;
    text-decoration: none !important;
}

/* Die Linie für die validen Ziele */
.hover-underline .kb-adv-text-inner::after,
.hover-underline .wp-block-kadence-advancedheading:not(:has(.kb-svg-icon-wrap))::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -1px;
    left: 0;
    background-color: currentColor; /* Erbt die Textfarbe */
    
    /* Animation-Setup */
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: transform 0.3s ease-out;
}

/* Trigger bei Hover über den Container */
.hover-underline:is(:hover, :focus-within, .is-active) .kb-adv-text-inner::after,
.hover-underline:is(:hover, :focus-within, .is-active) .wp-block-kadence-advancedheading:not(:has(.kb-svg-icon-wrap))::after {
    transform: scaleX(1);
}