/*!
 * WAB Boxen – Raster, Box-Stile und Hover-Animationen.
 * Farben und Abstände lassen sich über die CSS-Variablen in .wab-boxes im eigenen Theme überschreiben.
 */

.wab-boxes {
    --wab-cols: 3;
    --wab-cols-md: 2;
    --wab-cols-sm: 1;
    --wab-gap: 24px;
    --wab-icon-size: 56px;
    --wab-icon-color: currentColor;
    --wab-accent: var(--wab-color-primary, #2b2b2b);
    --wab-accent-text: var(--wab-color-primary-text, #fff);
    --wab-box-bg: #fff;
    --wab-box-text: var(--wab-color-dark, #1f2a24);
    --wab-box-radius: var(--wab-radius-card, 8px);
    --wab-box-padding: clamp(1.25rem, 2.5vw, 2rem);
    --wab-transition: .35s cubic-bezier(.33, 1, .68, 1);
    display: grid;
    grid-template-columns: repeat(var(--wab-cols), minmax(0, 1fr));
    gap: var(--wab-gap);
}

@media (max-width: 1024px) {
    .wab-boxes { grid-template-columns: repeat(var(--wab-cols-md), minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .wab-boxes { grid-template-columns: repeat(var(--wab-cols-sm), minmax(0, 1fr)); }
}

.wab-boxes:not(.wab-boxes--equal) { align-items: start; }

/* ------------------------------------------------------------------ */
/* Box                                                                 */
/* ------------------------------------------------------------------ */

.wab-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
    min-width: 0;
    border-radius: var(--wab-box-radius);
    transition: transform var(--wab-transition), box-shadow var(--wab-transition), background-color var(--wab-transition), border-color var(--wab-transition), color var(--wab-transition);
}

.wab-box__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.wab-box__headline {
    margin: 0 0 .5em;
    color: inherit;
    /* Boxen-Überschriften sind kleiner als normale h2 – Größe aus der root.css (h3) */
    font-size: var(--wab-h3-size, 1.5em);
}

.wab-box__text { flex: 1; }
.wab-box__text > :first-child { margin-top: 0; }
.wab-box__text > :last-child { margin-bottom: 0; }

/* Ausrichtung */
.wab-boxes--align-center .wab-box { align-items: center; text-align: center; }
.wab-boxes--align-left .wab-box { align-items: flex-start; text-align: left; }
.wab-boxes--align-right .wab-box { align-items: flex-end; text-align: right; }
.wab-box__body { align-self: stretch; }

/* Icon links neben dem Text */
.wab-boxes--icon-left .wab-box {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
}

.wab-boxes--icon-left.wab-boxes--align-right .wab-box { flex-direction: row-reverse; }

/* Stile */
/* Karte und Hinterlegt haben einen eigenen hellen Hintergrund – daher eigene Textfarbe,
   sonst wäre der Text in einem dunklen Abschnitt (helle Schrift) unsichtbar */
.wab-boxes--style-card .wab-box {
    padding: var(--wab-box-padding);
    background: var(--wab-box-bg);
    color: var(--wab-box-text);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.wab-boxes--style-border .wab-box {
    padding: var(--wab-box-padding);
    border: 1px solid rgba(0, 0, 0, .14);
}

.wab-boxes--style-filled .wab-box {
    padding: var(--wab-box-padding);
    background: var(--wab-color-light, #f4f7f5);
    color: var(--wab-color-light-text, #1f2a24);
}

/* ------------------------------------------------------------------ */
/* Icon                                                                */
/* ------------------------------------------------------------------ */

.wab-box__icon {
    flex-shrink: 0;
    width: var(--wab-icon-size);
    height: var(--wab-icon-size);
    color: var(--wab-icon-color);
    transition: color var(--wab-transition), transform var(--wab-transition);
}

.wab-box__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Mit Iconfarbe: Füllung und Kontur des SVGs übernehmen die Farbe */
.wab-boxes--icon-colored .wab-box__icon [fill]:not([fill="none"]),
.wab-boxes--icon-colored .wab-box__icon svg:not([fill]) :is(path, circle, rect, ellipse, polygon):not([fill]):not([stroke]) {
    fill: currentColor;
}

.wab-boxes--icon-colored .wab-box__icon [stroke]:not([stroke="none"]) {
    stroke: currentColor;
}

/* ------------------------------------------------------------------ */
/* Link                                                                */
/* ------------------------------------------------------------------ */

.wab-box--clickable { cursor: pointer; }

.wab-box__link--stretched::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

/* Links im Text bleiben trotz klickbarer Box anklickbar */
.wab-box--clickable .wab-box__text a {
    position: relative;
    z-index: 2;
}

.wab-box__link--visible {
    margin-top: 1.25em;
    font-weight: 600;
    text-decoration: none;
}

.wab-boxes--align-center .wab-box__link--visible { align-self: center; }
.wab-boxes--align-left .wab-box__link--visible { align-self: flex-start; }
.wab-boxes--align-right .wab-box__link--visible { align-self: flex-end; }

/* Ganze Box klickbar: sichtbarer Linktext als Textlink mit Pfeil */
.wab-box__link--stretched.wab-box__link--visible {
    color: var(--wab-accent);
}

.wab-box__link--stretched.wab-box__link--visible::before {
    content: "→";
    float: right;
    margin-left: .4em;
    transition: transform var(--wab-transition);
}

.wab-box:is(:hover, :focus-within) .wab-box__link--stretched.wab-box__link--visible::before {
    transform: translateX(4px);
}

.wab-box__link--visible:not(.wab-box__link--stretched) {
    display: inline-block;
    padding: .6em 1.4em;
    border-radius: 4px;
    background: var(--wab-accent);
    color: var(--wab-accent-text);
    transition: opacity .2s, transform .2s;
}

.wab-box__link--visible:not(.wab-box__link--stretched):hover {
    opacity: .85;
}

.wab-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Hover-Animationen der Box                                           */
/* ------------------------------------------------------------------ */

.wab-boxes--hover-lift .wab-box:is(:hover, :focus-within) {
    transform: translateY(-8px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
}

.wab-boxes--hover-grow .wab-box:is(:hover, :focus-within) {
    transform: scale(1.04);
}

.wab-boxes--hover-shadow .wab-box:is(:hover, :focus-within) {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.wab-boxes--hover-frame .wab-box {
    border: 2px solid transparent;
}

.wab-boxes--hover-frame.wab-boxes--style-border .wab-box {
    border-width: 2px;
    border-color: rgba(0, 0, 0, .14);
}

.wab-boxes--hover-frame .wab-box:is(:hover, :focus-within) {
    border-color: var(--wab-accent);
}

.wab-boxes--hover-fill .wab-box:is(:hover, :focus-within) {
    background: var(--wab-accent);
    color: var(--wab-accent-text);
}

.wab-boxes--hover-fill .wab-box:is(:hover, :focus-within) :is(.wab-box__icon, .wab-box__link--visible, .wab-box__text a) {
    color: var(--wab-accent-text);
}

.wab-boxes--hover-tilt .wab-box:is(:hover, :focus-within) {
    transform: perspective(800px) rotateX(4deg) rotateY(-5deg) translateY(-4px);
    box-shadow: 8px 14px 30px rgba(0, 0, 0, .14);
}

.wab-boxes--hover-underline .wab-box__headline {
    display: inline;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px;
    transition: background-size var(--wab-transition);
}

.wab-boxes--hover-underline .wab-box__headline::after {
    content: "";
    display: block;
    margin-bottom: .5em;
}

.wab-boxes--hover-underline .wab-box:is(:hover, :focus-within) .wab-box__headline {
    background-size: 100% 2px;
}

/* ------------------------------------------------------------------ */
/* Hover-Animationen des Icons                                         */
/* ------------------------------------------------------------------ */

.wab-boxes--hover-icon-bounce .wab-box:is(:hover, :focus-within) .wab-box__icon { animation: wab-icon-bounce .7s ease; }
.wab-boxes--hover-icon-rotate .wab-box:is(:hover, :focus-within) .wab-box__icon { transform: rotate(360deg); transition-duration: .7s; }
.wab-boxes--hover-icon-grow .wab-box:is(:hover, :focus-within) .wab-box__icon { transform: scale(1.2); }
.wab-boxes--hover-icon-pulse .wab-box:is(:hover, :focus-within) .wab-box__icon { animation: wab-icon-pulse 1s ease-in-out infinite; }
.wab-boxes--hover-icon-swing .wab-box:is(:hover, :focus-within) .wab-box__icon { animation: wab-icon-swing .8s ease; transform-origin: 50% 0; }
.wab-boxes--hover-icon-flip .wab-box:is(:hover, :focus-within) .wab-box__icon { transform: perspective(400px) rotateY(180deg); transition-duration: .6s; }

@keyframes wab-icon-bounce {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-14px); }
    50% { transform: translateY(0); }
    70% { transform: translateY(-6px); }
}

@keyframes wab-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes wab-icon-swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0); }
}