/* =========================================================
   LiSo MäuseWerk
   KOPFBEREICH "patterns-intro" + schwebende Deko-Kreise

   Gemeinsam genutzt von:
   uebersicht.html, lexikon.html, ueber-mich.html,
   stammmaeuse.html

   Änderungen am Kopfbereich (Abstände, Kreise, Größen)
   machst du nur HIER – sie gelten dann auf allen vier
   Seiten. Die Animation "decor-float" liegt in main.css.

   Einbinden (nach main.css):
   <link rel="stylesheet" href="css/patterns-intro.css">
   ========================================================= */


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.patterns-intro {

    position: relative;

    padding: 72px 70px 55px;

    text-align: center;

    background: var(--cream);

    overflow: hidden;

}

.patterns-intro h1 {

    margin-bottom: 18px;

}


/* Der gesamte Inhalt liegt über den Kreisen */

.patterns-intro > *:not(.patterns-intro-decoration) {

    position: relative;

    z-index: 2;

}


/* =========================================================
   DEKO-KREISE
   ========================================================= */

.patterns-intro-decoration {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

}

.patterns-intro-decoration span {

    position: absolute;

    display: block;

    border-radius: 50%;

    opacity: 0.7;

    animation:
        decor-float
        6s
        ease-in-out
        infinite;

}

.patterns-intro-decoration span:nth-child(1) {

    width: 170px;
    height: 170px;

    left: -65px;
    top: -50px;

    background: var(--pink);

    animation-delay: 0s;

}

.patterns-intro-decoration span:nth-child(2) {

    width: 100px;
    height: 100px;

    right: 40px;
    top: -35px;

    background: var(--blue);

    animation-delay: 0.4s;

}

.patterns-intro-decoration span:nth-child(3) {

    width: 60px;
    height: 60px;

    right: 95px;
    bottom: -20px;

    background: var(--mint);

    animation-delay: 0.8s;

}

.patterns-intro-decoration span:nth-child(4) {

    width: 45px;
    height: 45px;

    left: 12%;
    top: 22%;

    background: var(--yellow);

    animation-delay: 1.2s;

}

.patterns-intro-decoration span:nth-child(5) {

    width: 110px;
    height: 110px;

    left: 38%;
    bottom: -60px;

    background: var(--lilac);

    animation-delay: 1.6s;

}

.patterns-intro-decoration span:nth-child(6) {

    width: 70px;
    height: 70px;

    right: 12%;
    bottom: 18%;

    background: var(--mauve);

    animation-delay: 2s;

}

.patterns-intro-decoration span:nth-child(7) {

    width: 35px;
    height: 35px;

    left: 6%;
    bottom: 12%;

    background: var(--white);

    animation-delay: 2.4s;

}


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

@media (max-width: 900px) {

    .patterns-intro {

        padding: 65px 45px 50px;

    }

}


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

@media (max-width: 700px) {

    .patterns-intro {

        padding: 58px 25px 48px;

    }

    .patterns-intro h1 {

        font-size: 3rem;

    }

    .patterns-intro .intro-text {

        font-size: 0.86rem;

    }

}


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

@media (max-width: 420px) {

    .patterns-intro h1 {

        font-size: 2.65rem;

    }

}


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

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

    .patterns-intro-decoration span {

        animation: none !important;

        transition: none !important;

    }

}