/**
 * BnK Events — Landingpage /events/ (page-events.php).
 *
 * Baut auf dem Design-System aus main.css auf (Container, .section, .reveal,
 * .refs-*, .contact-*) und folgt demselben Aufbau wie /digital/: seitenweiter
 * Gradient-Hintergrund, Faktenband, halbtransparente Karten. Akzentfarbe ist
 * das warme Gold der Gastro-/Eventseite aus dem Hero-Diagramm der Startseite
 * (hero-flow.css: #8d9cff — das Gegenstück zum #d9a05b der Digitalseite).
 */

.ev-page {
    --ev-acc: #8d9cff;
    --ev-acc-soft: rgba(141, 156, 255, 0.14);
    position: relative;
}

/* (Oranger Farb-Override entfernt — die Events-LP nutzt jetzt exakt die
   Wellen/Farben der Startseite, JK 2026-08-02.) */

/* ══ Hero ══════════════════════════════════════════════════════════ */
.ev-hero {
    position: relative;
    /* Bewusst ueber der Viewporthoehe: der USP-Streifen darunter soll erst
       beim Scrollen auftauchen, nicht schon im ersten Bild mitlaufen. */
    min-height: clamp(680px, 100vh, 1040px);
    display: flex;
    align-items: center;
    padding: clamp(9rem, 18vh, 14rem) 0 clamp(7rem, 14vh, 11rem);
    overflow: hidden;
}

/* Bilderfolge im Hintergrund — reines CSS-Crossfade, kein JS.
   Aufbau: Bild 1 liegt dauerhaft sichtbar zuunterst, die folgenden blenden
   der Reihe nach mit steigendem z-index darüber und bleiben liegen. Am
   Zyklusende faden alle gemeinsam aus und geben Bild 1 wieder frei. So deckt
   zu jedem Zeitpunkt mindestens ein Bild die Fläche — ohne diesen Kniff
   blitzt in jeder Überblendung der Hintergrund durch. */
.ev-hero-slides {
    --ev-cycle: 56s;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Die Fotos laufen nach unten aus, sodass der Wellen-Hintergrund
       durchkommt — sonst steht eine harte Kante zwischen Hero und Seite. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0,0,0,.93) 64%, rgba(0,0,0,.78) 72%, rgba(0,0,0,.55) 79%, rgba(0,0,0,.33) 85%, rgba(0,0,0,.15) 90%, rgba(0,0,0,.05) 93%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0,0,0,.93) 64%, rgba(0,0,0,.78) 72%, rgba(0,0,0,.55) 79%, rgba(0,0,0,.33) 85%, rgba(0,0,0,.15) 90%, rgba(0,0,0,.05) 93%, transparent 96%);
}

.ev-hero-slides img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: clip-path, transform, filter;
    /* Sehr langsamer Zoom ueber zwei Zyklen, alternierend — dadurch kein
       harter Ruecksprung am Zyklusende. */
    animation: evHeroZoom calc(var(--ev-cycle) * 2) ease-in-out infinite alternate;
}

/* Wipe statt Crossfade: jedes Bild wischt als diagonale Kante von rechts
   herein (clip-path), leicht uebergross und mit kurzem Licht-Punch, und
   bleibt dann liegen. Bild 1 traegt den Zyklusanfang. Die Keyframes teilen
   sich einen 8er-Takt: Slide N erscheint bei (N-1) * 12.5% des Zyklus. */
.ev-hero-slides img:nth-child(1) { z-index: 0; }

.ev-hero-slides img:nth-child(2) { z-index: 2; animation: evWipe2 var(--ev-cycle) linear infinite, evHeroZoom calc(var(--ev-cycle) * 2) ease-in-out infinite alternate; }
.ev-hero-slides img:nth-child(3) { z-index: 3; animation: evWipe3 var(--ev-cycle) linear infinite, evHeroZoom calc(var(--ev-cycle) * 2) ease-in-out infinite alternate; }
.ev-hero-slides img:nth-child(4) { z-index: 4; animation: evWipe4 var(--ev-cycle) linear infinite, evHeroZoom calc(var(--ev-cycle) * 2) ease-in-out infinite alternate; }
.ev-hero-slides img:nth-child(5) { z-index: 5; animation: evWipe5 var(--ev-cycle) linear infinite, evHeroZoom calc(var(--ev-cycle) * 2) ease-in-out infinite alternate; }
.ev-hero-slides img:nth-child(6) { z-index: 6; animation: evWipe6 var(--ev-cycle) linear infinite, evHeroZoom calc(var(--ev-cycle) * 2) ease-in-out infinite alternate; }
.ev-hero-slides img:nth-child(7) { z-index: 7; animation: evWipe7 var(--ev-cycle) linear infinite, evHeroZoom calc(var(--ev-cycle) * 2) ease-in-out infinite alternate; }
.ev-hero-slides img:nth-child(8) { z-index: 8; animation: evWipe8 var(--ev-cycle) linear infinite, evHeroZoom calc(var(--ev-cycle) * 2) ease-in-out infinite alternate; }

@keyframes evWipe2 {
    0%, 12.5% { clip-path: polygon(115% -15%, 130% -15%, 115% 115%, 100% 115%); filter: brightness(1.9) saturate(1.25); }
    16% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); filter: brightness(1); }
    96% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 1; filter: brightness(1); }
    100% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 0; filter: brightness(1); }
}
@keyframes evWipe3 {
    0%, 25% { clip-path: polygon(115% -15%, 130% -15%, 115% 115%, 100% 115%); filter: brightness(1.9) saturate(1.25); }
    28.5% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); filter: brightness(1); }
    96% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 1; filter: brightness(1); }
    100% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 0; filter: brightness(1); }
}
@keyframes evWipe4 {
    0%, 37.5% { clip-path: polygon(115% -15%, 130% -15%, 115% 115%, 100% 115%); filter: brightness(1.9) saturate(1.25); }
    41% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); filter: brightness(1); }
    96% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 1; filter: brightness(1); }
    100% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 0; filter: brightness(1); }
}
@keyframes evWipe5 {
    0%, 50% { clip-path: polygon(115% -15%, 130% -15%, 115% 115%, 100% 115%); filter: brightness(1.9) saturate(1.25); }
    53.5% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); filter: brightness(1); }
    96% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 1; filter: brightness(1); }
    100% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 0; filter: brightness(1); }
}
@keyframes evWipe6 {
    0%, 62.5% { clip-path: polygon(115% -15%, 130% -15%, 115% 115%, 100% 115%); filter: brightness(1.9) saturate(1.25); }
    66% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); filter: brightness(1); }
    96% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 1; filter: brightness(1); }
    100% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 0; filter: brightness(1); }
}
@keyframes evWipe7 {
    0%, 75% { clip-path: polygon(115% -15%, 130% -15%, 115% 115%, 100% 115%); filter: brightness(1.9) saturate(1.25); }
    78.5% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); filter: brightness(1); }
    96% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 1; filter: brightness(1); }
    100% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 0; filter: brightness(1); }
}
@keyframes evWipe8 {
    0%, 87.5% { clip-path: polygon(115% -15%, 130% -15%, 115% 115%, 100% 115%); filter: brightness(1.9) saturate(1.25); }
    91% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); filter: brightness(1); }
    96% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 1; filter: brightness(1); }
    100% { clip-path: polygon(-30% -15%, 130% -15%, 115% 115%, -45% 115%); opacity: 0; filter: brightness(1); }
}

@keyframes evHeroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* Abdunkelung über den Bildern — links kräftiger, damit der Text trägt. */
.ev-hero-slides::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10,10,10,.58) 0%, rgba(10,10,10,.68) 42%, rgba(10,10,10,.5) 62%, rgba(10,10,10,.3) 74%, rgba(10,10,10,.14) 83%, rgba(10,10,10,0) 92%),
        linear-gradient(90deg, rgba(10,10,10,.74) 0%, rgba(10,10,10,.36) 48%, rgba(10,10,10,0) 78%);
    /* Muss ueber ALLEN Bildern liegen — die tragen z-index 1..5. */
    z-index: 10;
}

.ev-hero-inner {
    position: relative;
    z-index: 11;
    max-width: 900px;
}

.ev-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.03;
    margin-bottom: 1.6rem;
    text-wrap: balance;
}

.ev-hero-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 62ch;
    margin-bottom: 2rem;
}

.ev-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2.4rem;
}

.ev-hero-pills li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.ev-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ev-acc);
}

.ev-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ══ USP-Streifen ══════════════════════════════════════════════════
   Bewusst ohne Trennlinien und ohne Akzentfarbe — dieselbe ruhige
   Zahl-plus-Label-Reihe wie auf /digital/; Sterne weiss wie das
   Google-Badge der Startseite (.gr-stars). */
.ev-facts-band {
    padding: clamp(2.5rem, 5.5vw, 4rem) 0;
    background: none;
}

.ev-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem clamp(1.5rem, 3.5vw, 3rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.ev-fact { display: grid; gap: 0.45rem; align-content: start; }

.ev-fact-num {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 3.8vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--text-primary);
}

.ev-fact-num,
.ev-fact-stars {
    /* Eine gemeinsame Zeilenhoehe fuer alle vier Kacheln — sonst sitzt die
       Sternreihe optisch tiefer als die Zahlen daneben. */
    display: flex;
    align-items: center;
    min-height: clamp(2.1rem, 3.8vw, 3rem);
}

.ev-fact-stars {
    gap: 5px;
    color: var(--text-primary);
}

.ev-fact-stars svg {
    width: clamp(21px, 2.3vw, 28px);
    height: clamp(21px, 2.3vw, 28px);
    display: block;
    flex: 0 0 auto;
}

.ev-fact-unit {
    font-size: 0.5em;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 0.04em;
    /* vertical-align wirkt im Flex-Container nicht — Position per align-self. */
    align-self: flex-start;
    margin-top: 0.12em;
}

.ev-fact-stars-num {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-left: 0.45rem;
}

/* Text-USPs: kuerzere Claims statt Zahlen — etwas kleiner als das Zahlenformat,
   damit "Eigene Location" einzeilig bleibt. */
.ev-fact-num--text {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    letter-spacing: -0.02em;
}

.ev-fact-label {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 26ch;
}

/* ══ Bereiche ══════════════════════════════════════════════════════
   Kompaktes 2x2-Kartenraster statt breiter Zeilen: gleich hohe Bloecke,
   jede Karte in sich geschlossen — die frueheren Full-Width-Reihen mit
   Icon in eigener Spalte wirkten auseinandergezogen. */
.ev-areas-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ev-area {
    display: flex;
    flex-direction: column;
    padding: clamp(1.6rem, 2.6vw, 2.2rem);
    background: rgba(20, 20, 24, 0.55);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition-property: background-color, border-color;
    transition-duration: var(--duration-normal);
    transition-timing-function: var(--ease-out);
}

.ev-area.is-active,
.ev-area:hover {
    background: rgba(26, 26, 32, 0.72);
    border-color: var(--border-medium);
}

.ev-area-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

.ev-area-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    color: var(--text-tertiary);
    transition-property: color;
    transition-duration: 0.5s;
    transition-timing-function: var(--ease-out);
}

.ev-area-icon svg { width: 100%; height: 100%; }

/* Aktiv = Karte liegt im mittleren Viewport-Band (IntersectionObserver im
   Template setzt .is-active); beim Weiterscrollen faellt sie zurueck auf grau. */
.ev-area.is-active .ev-area-icon,
.ev-area:hover .ev-area-icon { color: var(--ev-acc); }

.ev-area-tag {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0;
}

.ev-area-title {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 0.7rem;
    color: var(--text-primary);
}

.ev-area-lead {
    font-size: 0.975rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.ev-area-items {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.5rem;
    /* Trennlinie oben statt Kastenrahmen — haelt den Block ruhig. */
    padding-top: 1.15rem;
    border-top: 1px solid var(--border-subtle);
}

.ev-area-items li {
    position: relative;
    padding-left: 1.05rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ev-area-items li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ev-acc);
    opacity: 0.85;
}

.ev-area-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Schiebt den Link ans Kartenende, damit alle vier buendig sitzen. */
    margin-top: auto;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    transition-property: color, gap;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
}

.ev-area-link svg { width: 16px; height: 16px; }
.ev-area-link:hover { color: var(--ev-acc); gap: 0.85rem; }

/* ══ Personalstellung ══════════════════════════════════════════════ */
.ev-personal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ev-personal-card {
    background: rgba(16, 16, 20, 0.72);
    padding: clamp(1.75rem, 3vw, 2.25rem);
    /* Einzelne Properties statt transition-Shorthand — ein Shorthand hier
       würde die .reveal-Transition des Elternelements aushebeln. */
    transition-property: background-color;
    transition-duration: var(--duration-normal);
    transition-timing-function: var(--ease-out);
}

.ev-personal-card:hover { background: rgba(28, 28, 34, 0.82); }

.ev-personal-num {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ev-acc);
    margin-bottom: 1rem;
}

.ev-personal-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: var(--text-primary);
}

.ev-personal-card p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.ev-personal-note {
    margin-top: 2rem;
    font-size: 0.95rem;
    color: var(--text-tertiary);
}

.ev-personal-note a {
    color: var(--ev-acc);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ══ Anlässe ═══════════════════════════════════════════════════════ */
.ev-types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ev-types li {
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--border-medium);
    border-radius: 100px;
    background: rgba(20, 20, 24, 0.45);
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition-property: border-color, color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
}

.ev-types li:hover { border-color: var(--ev-acc); color: var(--text-primary); }

/* ══ Ablauf ════════════════════════════════════════════════════════ */
.ev-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.ev-step { border-top: 1px solid var(--border-medium); padding-top: 1.5rem; }

.ev-step-num {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ev-acc);
    margin-bottom: 0.9rem;
}

.ev-step h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: var(--text-primary);
}

.ev-step p { font-size: 0.95rem; line-height: 1.65; color: var(--text-secondary); }

/* ══ Referenzen ════════════════════════════════════════════════════ */
.ev-refs-section .section-header { margin-bottom: 2.5rem; }
.ev-refs-section .projects-category { margin-bottom: 0; }

/* ══ FAQ ═══════════════════════════════════════════════════════════ */
.ev-faq {
    max-width: 820px;
    border-top: 1px solid var(--border-subtle);
}

.ev-faq-item { border-bottom: 1px solid var(--border-subtle); }

.ev-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    font-weight: 500;
    color: var(--text-primary);
    transition-property: color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
}

.ev-faq-item summary::-webkit-details-marker { display: none; }
.ev-faq-item summary:hover { color: var(--ev-acc); }

.ev-faq-item summary:focus-visible {
    outline: 2px solid var(--border-strong);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.ev-faq-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--text-tertiary);
    transition-property: transform, color;
    transition-duration: var(--duration-normal);
    transition-timing-function: var(--ease-out);
}

.ev-faq-icon svg { width: 100%; height: 100%; }
.ev-faq-item[open] .ev-faq-icon { transform: rotate(180deg); color: var(--ev-acc); }

.ev-faq-answer { padding: 0 0 1.5rem; max-width: 68ch; }

.ev-faq-answer p {
    font-size: 0.975rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ══ Anfrage ═══════════════════════════════════════════════════════ */
.ev-anfrage .contact-form {
    background: rgba(20, 20, 24, 0.55);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* Sektionen bekommen keine eigene Fläche — sonst schneidet jede Kante den
   durchlaufenden Hintergrund ab (gleiche Regel wie auf der Startseite). */
.ev-page .section,
.ev-facts-band { background: none; }

/* ══ Responsive ════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ev-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ev-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .ev-personal-grid { grid-template-columns: repeat(2, 1fr); }
    .ev-steps { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 700px) {
    .ev-hero { min-height: 100svh; }
    .ev-facts { grid-template-columns: 1fr; gap: 1.75rem; }
    .ev-cards { grid-template-columns: 1fr; }
    .ev-areas-list { grid-template-columns: 1fr; }
    .ev-hero-slides::after {
        background: linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.74) 42%, rgba(10,10,10,.5) 64%, rgba(10,10,10,.26) 78%, rgba(10,10,10,0) 92%);
    }
}

@media (max-width: 600px) {
    .ev-personal-grid { grid-template-columns: 1fr; }
}

/* ══ Reduzierte Bewegung ═══════════════════════════════════════════
   Der globale 0.01ms-Block in main.css springt auf die BASIS-Styles, nicht
   auf den Endzustand — Bilder mit opacity:0 blieben damit dauerhaft
   unsichtbar. Deshalb hier ein explizites Standbild. */
@media (prefers-reduced-motion: reduce) {
    .ev-hero-slides img { animation: none; }
    .ev-hero-slides img:not(:first-child) { opacity: 0; }
    .ev-hero-slides img:first-child { opacity: 1; }
    .ev-faq-icon,
    .ev-personal-card,
    .ev-card,
    .ev-area-icon,
    .ev-area-link,
    .ev-types li { transition: none; }
}