/* =========================================================
TEAM
========================================================= */

.mice-team {

background: var(--light-lilac);
background-image:
        url("../images/mäuse.svg");

background-repeat:
        no-repeat;

background-position:
        top center;

background-size:
        100% auto;

}

/* =========================================================
GRID
========================================================= */

.mice-grid {

display: grid;

grid-template-columns:
    repeat(2, minmax(0, 1fr));

gap: 26px;

max-width: 1050px;

margin: 0 auto;

}

/* =========================================================
STAMM-MAUS KARTE
========================================================= */

.mouse-card {

position: relative;

min-height: 230px;

padding: 28px;

border-radius: 28px;

background: var(--white);

box-shadow: var(--shadow-soft);

overflow: hidden;

transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}

/* farbiger Hintergrund-Akzent */

.mouse-card::after {

content: "";

position: absolute;

width: 125px;
height: 125px;

right: -45px;
bottom: -50px;

border-radius: 50%;

opacity: 0.45;

transition:
    transform 0.35s ease;

}

.mouse-card:hover {

transform: translateY(-6px);

box-shadow:
    0 16px 40px
    rgba(81,75,87,0.14);

}

.mouse-card:hover::after {

transform: scale(1.25);

}

/* =========================================================
FARBEN
========================================================= */

.mouse-card-pink::after {

background: var(--pink);

}

.mouse-card-mint::after {

background: var(--mint);

}

.mouse-card-blue::after {

background: var(--blue);

}

.mouse-card-yellow::after {

background: var(--yellow);

}

/* =========================================================
KARTEN-KOPF
========================================================= */

.mouse-card-top {

position: relative;

z-index: 2;

display: flex;

align-items: center;

gap: 20px;

margin-bottom: 22px;

}

/* =========================================================
MAUS-LOGO / FOTO
========================================================= */

.mouse-logo {

flex: 0 0 105px;

width: 105px;
height: 105px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 50%;

background: var(--cream);

border: 5px solid var(--white);

box-shadow:
    0 5px 18px
    rgba(81,75,87,0.10);

overflow: hidden;

}

.mouse-logo img {

width: 100%;
height: 100%;

object-fit: cover;

transition:
    transform 0.35s ease;

}

.mouse-card:hover .mouse-logo img {

transform: scale(1.06);

}

/* =========================================================
NAME / DATUM
========================================================= */

.mouse-info {

min-width: 0;

}

.mouse-info h3 {

margin-bottom: 7px;

font-size: 1.45rem;

}

.mouse-since {

display: inline-block;

padding: 6px 11px;

border-radius: 100px;

background: var(--light-lilac);

color: var(--soft-dark);

font-size: 0.68rem;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 0.06em;

}

/* =========================================================
VORSTELLUNGSTEXT
========================================================= */

.mouse-intro {

position: relative;

z-index: 2;

padding: 18px 20px;

border-radius: 18px;

background: #faf8f5;

}

.mouse-intro::before {

content: "♡ ";

display: block;

margin-bottom: 7px;

color: var(--pink);

font-size: 0.8rem;

}

.mouse-intro p {

margin: 0;

color: var(--soft-dark);

font-size: 0.84rem;

line-height: 1.65;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 950px) {

.mice-team {

    padding-left: 40px;
    padding-right: 40px;

    background-image:
        url("../images/mäuse-tablet.svg");

}

.mice-grid {

    gap: 20px;

}

.mouse-card {

    padding: 23px;

}

.mouse-logo {

    flex-basis: 90px;

    width: 90px;
    height: 90px;

}

.mouse-card-top {

    gap: 15px;

}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

.mice-team {

    padding: 50px 20px;

    background-image:
        url("../images/mäuse-mobil.svg");

}

.mice-grid {

    grid-template-columns: 1fr;

    gap: 18px;

}

.mouse-card {

    min-height: auto;

    padding: 22px;

    border-radius: 24px;

}

.mouse-logo {

    flex-basis: 82px;

    width: 82px;
    height: 82px;

}

.mouse-info h3 {

    font-size: 1.25rem;

}

.mouse-card-top {

    gap: 14px;

    margin-bottom: 18px;

}

.mouse-intro {

    padding: 16px 17px;

}

}

/* =========================================================
SEHR KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

.mouse-card-top {

    align-items: flex-start;

}

.mouse-logo {

    flex-basis: 72px;

    width: 72px;
    height: 72px;

}

.mouse-info h3 {

    font-size: 1.15rem;

}

.mouse-since {

    font-size: 0.6rem;

}

}

/* =========================================================
REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

.mouse-card,
.mouse-logo img {

    animation: none !important;

    transition: none !important;

}

}