/* =========================================================
   STARTBILDSCHIRM (Splash Screen)
   ========================================================= */

.splash-screen {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: linear-gradient(
        160deg,
        var(--cream),
        var(--light-lilac)
    );

    opacity: 1;

    visibility: visible;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;

}

.splash-screen.splash-hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

/* DEKO-KREISE */

.splash-decoration span {

    position: absolute;

    display: block;

    border-radius: 50%;

    opacity: 0.55;

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

}

.splash-decoration span:nth-child(1) {

    width: 170px;
    height: 170px;

    left: -60px;
    top: -50px;

    background: var(--pink);

    animation-delay: 0s;

}

.splash-decoration span:nth-child(2) {

    width: 100px;
    height: 100px;

    right: 8%;
    top: -30px;

    background: var(--mint);

    animation-delay: 0.5s;

}

.splash-decoration span:nth-child(3) {

    width: 120px;
    height: 120px;

    left: 8%;
    bottom: -55px;

    background: var(--blue);

    animation-delay: 1s;

}

.splash-decoration span:nth-child(4) {

    width: 70px;
    height: 70px;

    right: 14%;
    bottom: -15px;

    background: var(--yellow);

    animation-delay: 1.5s;

}

.splash-decoration span:nth-child(5) {

    width: 45px;
    height: 45px;

    left: 20%;
    top: 16%;

    background: var(--lilac);

    animation-delay: 2s;

}

.splash-decoration span:nth-child(6) {

    width: 60px;
    height: 60px;

    right: 22%;
    bottom: 14%;

    background: var(--light-lilac);

    animation-delay: 2.5s;

}

/* INHALT */

.splash-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 0 20px;

}

.splash-logo-frame {

    width: min(150px, 42vw);

    aspect-ratio: 1;

    margin-bottom: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--white);

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

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

    overflow: hidden;

    animation:
        splash-pulse
        2.2s
        ease-in-out
        infinite;

}

.splash-logo-frame img {

    width: 78%;

    height: 78%;

    object-fit: contain;

}

.splash-brand {

    margin: 0 0 10px;

    display: flex;

    align-items: baseline;

    gap: 8px;

}

.splash-brand-main {

    font-family: "Elfarg", serif;

    font-size: clamp(2rem, 5vw, 2.6rem);

    color: var(--dark);

}

.splash-brand-sub {

    font-family: "Stay Classy", cursive;

    font-size: clamp(1.4rem, 3.6vw, 1.8rem);

    color: var(--pink);

}

.splash-text {

    margin: 0 0 26px;

    color: var(--soft-dark);

    font-size: 0.85rem;

    transition: opacity 0.2s ease;

}

.splash-progress {

    width: 170px;

    height: 6px;

    border-radius: 100px;

    background: rgba(255, 255, 255, 0.7);

    overflow: hidden;

}

.splash-progress span {

    display: block;

    width: 0%;

    height: 100%;

    border-radius: inherit;

    background: var(--pink);

}

.splash-progress.splash-progress-run span {

    animation:
        splash-fill
        3s
        linear
        forwards;

}

/* GRÖSSER FÜR PC */

@media (min-width: 900px) {

    .splash-logo-frame {

        width: 210px;

        margin-bottom: 28px;

    }

    .splash-text {

        margin-bottom: 32px;

        font-size: 1.05rem;

    }

    .splash-progress {

        width: 230px;

        height: 8px;

    }

}

/* TABLET / MOBILE */

@media (max-width: 700px) {

    .splash-logo-frame {

        margin-bottom: 18px;

    }

    .splash-text {

        font-size: 0.8rem;

    }

    .splash-decoration span:nth-child(5) {

        width: 32px;
        height: 32px;

    }

    .splash-decoration span:nth-child(6) {

        width: 42px;
        height: 42px;

    }

}

/* REDUZIERTE BEWEGUNG */

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

    .splash-screen {

        display: none !important;

    }

}

/* =========================================================
   HERO
========================================================= */

.hero {

    position:
        relative;

    padding:
        65px 55px 75px;

    background:
        var(--cream);

    overflow:
        hidden;

}

.hero-inner {

    display:
        grid;

    grid-template-columns:
        1fr 0.85fr;

    align-items:
        center;

    gap:
        60px;

}

.hero-text {

    max-width:
        610px;

}

.hero h1 {

    margin-bottom:
        25px;

}

.hero h1 span {

    color:
        var(--pink);

}

.hero-description {

    max-width:
        510px;

    margin-bottom:
        28px;

    color:
        var(--soft-dark);

    font-size:
        0.95rem;

}

.hero-buttons {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        20px;

}

/* =========================================================
   HERO BILD
========================================================= */

.hero-picture {

    position:
        relative;

    min-height:
        470px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}

/* rundes Startbild – ohne Platzhalter-Fläche dahinter,
   das Bild selbst ist bereits rund */

.hero-image-frame {

    position:
        relative;

    width:
        min(
            400px,
            88%
        );

    aspect-ratio:
        1;

    overflow:
        hidden;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}

/* DEKORATION – schwebende Kreise am Startbild */

.decor-circle {

    position:
        absolute;

    border-radius:
        50%;

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

}

.decor-yellow {

    width:
        90px;

    height:
        90px;

    right:
        10%;

    top:
        5%;

    background:
        var(--yellow);

    animation-delay:
        0s;

}

.decor-mint {

    width:
        72px;

    height:
        72px;

    left:
        10%;

    bottom:
        10%;

    background:
        var(--mint);

    animation-delay:
        0.6s;

}

.decor-pink {

    width:
        55px;

    height:
        55px;

    right:
        8%;

    bottom:
        7%;

    background:
        var(--pink);

    animation-delay:
        1.2s;

}

/* =========================================================
   BUTTONS
========================================================= */

.button {

    position:
        relative;

    z-index:
        1;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    padding:
        13px 23px;

    border:
        0;

    border-radius:
        100px;

    background:
        transparent;

    color:
        var(--dark);

    font-size:
        0.82rem;

    font-weight:
        700;

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

}

/* farbige Fläche, die versetzt hinter der
   Kontur hervorschaut */

.button::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    border-radius:
        inherit;

    transform:
        translate(6px, 6px);

    transition:
        transform 0.25s ease;

}

/* Kontur – als eigene Ebene ÜBER der
   Farbfläche, damit die Füllung wirklich
   darunter hervorzurutschen scheint */

.button::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    border:
        2px solid
        var(--dark);

    border-radius:
        inherit;

    pointer-events:
        none;

}

.button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(81,75,87,0.13);

}

.button:hover::before {

    transform:
        translate(0, 0);

}

.button-pink::before {

    background:
        var(--pink);

}

.button-yellow::before {

    background:
        var(--yellow);

}

.button-mint::before {

    background:
        var(--mint);

}

.simple-link {

    padding-bottom:
        3px;

    border-bottom:
        2px solid
        var(--pink);

    font-size:
        0.82rem;

    font-weight:
        700;

}

/* =========================================================
   GALERIE (durchlaufender Bilderstreifen)
========================================================= */

.gallery-wrapper {

    overflow:
        hidden;

    background:
        var(--lilac);

    padding:
        36px 0;

}

.gallery-track {

    display:
        flex;

    width:
        max-content;

    gap:
        16px;

    animation:
        gallery-scroll
        75s
        linear
        infinite;

    /* nicht klickbar / nicht anhaltbar */
    pointer-events:
        none;

}

.gallery-item {

    flex:
        0 0 auto;

    width:
        150px;

    aspect-ratio:
        3 / 4;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        20px;

    overflow:
        hidden;

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

}

.gallery-c1 {

    background:
        var(--pink);

}

.gallery-c2 {

    background:
        var(--blue);

}

.gallery-c3 {

    background:
        var(--mint);

}

/* =========================================================
   WAS MICH AUSMACHT
   ========================================================= */

.about-values {

    background: var(--light-lilac);

}

.values-grid {

    display: grid;

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

    gap: 22px;

}

.value-card {

    padding: 30px 24px;

    border-radius: var(--radius-card);

    background: var(--white);

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

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

}

.value-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 14px 35px
        rgba(81,75,87,0.13);

}

.value-icon {

    width: 50px;
    height: 50px;

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 1.3rem;

}

.value-card:nth-child(1) .value-icon {

    background: var(--mint);

}

.value-card:nth-child(2) .value-icon {

    background: var(--blue);

}

.value-card:nth-child(3) .value-icon {

    background: var(--pink);

}

.value-card:nth-child(4) .value-icon {

    background: var(--yellow);

}

.value-card h3 {

    margin-bottom: 8px;

    font-size: 1.25rem;

}

.value-card p {

    color: var(--soft-dark);

    font-size: 0.82rem;

    line-height: 1.6;

}

/* =========================================================
   NEU & BELIEBT
========================================================= */

.spotlight {

    background:
        var(--white);

    background-image:
        url("../images/neubeliebt.svg");

    background-repeat:
        no-repeat;

    background-position:
        top center;

    background-size:
        100% auto;

}

.spotlight-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 330px));

    justify-content:
        center;

    gap:
        24px;

}

.spotlight-card {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        var(--radius-card);

    background:
        var(--white);

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

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

}

.spotlight-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 14px 35px
        rgba(81,75,87,0.13);

}

.spotlight-label {

    position:
        absolute;

    z-index:
        2;

    top:
        20px;

    left:
        20px;

    padding:
        6px 14px;

    border-radius:
        100px;

    background:
        rgba(255,253,249,0.88);

    color:
        var(--soft-dark);

    font-size:
        0.68rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.09em;

}

.spotlight-new .spotlight-label {

    background:
        var(--mint);

    color:
        var(--dark);

}

.spotlight-popular .spotlight-label {

    background:
        var(--pink);

    color:
        var(--dark);

}

.spotlight-image {

    position:
        relative;

    display:
        block;

    aspect-ratio:
        1;

    overflow:
        hidden;

    padding:
        10px;

    box-sizing:
        border-box;

    background:
        var(--cream);

}

.spotlight-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        20px;

}

/* "Neu"-Fähnchen – bei Bedarf einfach das <span
   class="spotlight-flag"> im HTML entfernen, wenn kein
   neues Muster gezeigt wird */

.spotlight-flag {

    position:
        absolute;

    z-index:
        2;

    top:
        20px;

    right:
        20px;

    padding:
        6px 14px;

    border-radius:
        100px;

    background:
        var(--yellow);

    color:
        var(--dark);

    font-size:
        0.68rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.09em;

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

}

.spotlight-body {

    padding:
        18px 20px 20px;

}

.spotlight-body h3 {

    margin-bottom:
        8px;

}

.spotlight-body p {

    max-width:
        500px;

    margin-bottom:
        15px;

    color:
        var(--soft-dark);

    font-size:
        0.85rem;

    line-height:
        1.55;

}

/* =========================================================
   COMMUNITY-STIMMEN

   Karten liegen nebeneinander in einer horizontal
   scrollbaren Leiste (auch per Wisch auf dem Handy).
   Die Scrollbar selbst ist unsichtbar, an den Rändern
   sorgt ein sanfter Verlauf dafür, dass klar ist, dass es
   weitergeht.
========================================================= */

.testimonials {

    background:
        var(--cream);

    background-image:
        url("../images/community.svg");

    background-repeat:
        no-repeat;

    background-position:
        top center;

    background-size:
        100% auto;

}

.rondell-wrapper {

    position:
        relative;

    margin:
        0 -55px;

}

.testimonial-nav {

    position:
        absolute;

    top:
        50%;

    z-index:
        10;

    width:
        42px;
    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translate(-50%, -50%);

    border:
        0;

    border-radius:
        50%;

    background:
        var(--pink);

    color:
        var(--dark);

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

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;

}

.testimonial-nav img {

    width:
        50px;
    height:
        50px;

    object-fit:
        contain;

    pointer-events:
        none;

}

.testimonial-nav:hover {

    background:
        var(--mint);

    color:
        var(--dark);

    transform:
        translate(-50%, -50%) scale(1.08);

}

.testimonial-nav-prev {

    left:
        calc(50% - 185px);

}

.testimonial-nav-next {

    left:
        calc(50% + 185px);

}

/* =========================================================
   RONDELL (3-Karten-Karussell)

   .rondell-stage ist das sichtbare Fenster. Jede Karte
   (.rondell-slide) liegt absolut positioniert übereinander
   und bekommt per JS ein data-slot-Attribut
   (center / left / right / far-left / far-right), das über
   die Attribut-Selektoren unten Position, Größe und
   Deckkraft bestimmt. Beim Wechsel ändert sich nur dieses
   Attribut – der Übergang (transition) sorgt für die
   gleitende Bewegung.
========================================================= */

.rondell-stage {

    position:
        relative;

    height:
        520px;

    overflow:
        hidden;

    perspective:
        1600px;

}

.rondell-track {

    position:
        relative;

    width:
        100%;
    height:
        100%;

}

.rondell-slide {

    position:
        absolute;

    top:
        50%;
    left:
        50%;

    width:
        320px;

    transition:
        transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.6s ease;

    cursor:
        pointer;

}

.rondell-slide[data-slot="center"] {

    transform:
        translate(-50%, -50%)
        translateX(0)
        scale(1)
        rotateY(0deg);

    opacity:
        1;

    z-index:
        5;

    cursor:
        default;

}

.rondell-slide[data-slot="left"] {

    transform:
        translate(-50%, -50%)
        translateX(-340px)
        scale(0.8)
        rotateY(10deg);

    opacity:
        0.65;

    z-index:
        3;

}

.rondell-slide[data-slot="right"] {

    transform:
        translate(-50%, -50%)
        translateX(340px)
        scale(0.8)
        rotateY(-10deg);

    opacity:
        0.65;

    z-index:
        3;

}

.rondell-slide[data-slot="far-left"] {

    transform:
        translate(-50%, -50%)
        translateX(-560px)
        scale(0.6)
        rotateY(18deg);

    opacity:
        0;

    z-index:
        1;

    pointer-events:
        none;

}

.rondell-slide[data-slot="far-right"] {

    transform:
        translate(-50%, -50%)
        translateX(560px)
        scale(0.6)
        rotateY(-18deg);

    opacity:
        0;

    z-index:
        1;

    pointer-events:
        none;

}

.testimonial-card {

    width:
        320px;

    padding:
        30px 26px 26px;

    border-radius:
        26px;

    background:
        var(--white);

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

}

.testimonial-quote-mark {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--pink);

    font-size:
        2rem;

    line-height:
        1;

}

.testimonial-pink .testimonial-quote-mark {

    color:
        var(--pink);

}

.testimonial-mint .testimonial-quote-mark {

    color:
        var(--mint);

}

.testimonial-blue .testimonial-quote-mark {

    color:
        var(--blue);

}

.testimonial-yellow .testimonial-quote-mark {

    color:
        var(--yellow);

}

.testimonial-text {

    margin-bottom:
        22px;

    color:
        var(--soft-dark);

    font-size:
        0.86rem;

    line-height:
        1.65;

}

.testimonial-footer {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}

.testimonial-avatar {

    width:
        38px;
    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--light-lilac);

    color:
        var(--dark);

    font-family:
        "Elfarg", serif;

    font-size:
        1rem;

}

.testimonial-pink .testimonial-avatar {

    background:
        var(--pink);

}

.testimonial-mint .testimonial-avatar {

    background:
        var(--mint);

}

.testimonial-blue .testimonial-avatar {

    background:
        var(--blue);

}

.testimonial-yellow .testimonial-avatar {

    background:
        var(--yellow);

}

.testimonial-name {

    color:
        var(--dark);

    font-size:
        0.8rem;

    font-weight:
        700;

}

/* =========================================================
   ÜBER MICH
========================================================= */

.about-section {

    padding:
        80px 55px;

    background:
        var(--light-lilac);

    background-image:
        url("../images/galerie.svg");

    background-repeat:
        no-repeat;

    background-position:
        top center;

    background-size:
        100% auto;

}

.about-inner {

    display:
        flex;

    flex-direction:
        column;

    gap:
        36px;

}

.about-heading {

    max-width:
        720px;

}

.about-content {

    display:
        flex;

    align-items:
        center;

    gap:
        50px;

}

/* =====================================================
   BILD "WILLKOMMEN DU KLEINE NÄHMAUS"

   Größe und Position hier für PC (Grundeinstellung),
   weiter unten in den @media-Blöcken extra für Tablet
   und Handy einstellbar.
===================================================== */

.about-picture {

    flex:
        0 0 auto;

    align-self:
        center;
}

.about-picture img {

    display:
        block;

    width:
        320px;

    max-width:
        100%;

    height:
        auto;

}

.about-text {

    max-width:
        900px;

    margin:
        0;

    text-align:
        left;

}

.about-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        16px;

    margin-top:
        22px;

}

.about-heading h2 {

    margin-bottom:
        22px;

}

.about-heading h2 span {

    color:
        var(--pink);

}

.about-text p {

    margin-bottom:
        14px;

    color:
        var(--soft-dark);

    font-size:
        0.9rem;

}

.about-text .button {

    margin-top:
        8px;

}

/* =========================================================
   SCHNEE-EFFEKT (nur Startseite, 30.11. – 30.01.)

   Zwei Zonen: .snow-zone-header für den Header und
   .snow-zone für Newsticker, Hero und Download-Hinweis –
   also alles bis (aber ohne) die Galerie. Die Flocken
   werden per JS nur in diesem Zeitraum erzeugt und
   automatisch eingefügt, siehe Script am Ende der
   index.html.
========================================================= */

.snow-zone {

    position:
        relative;

    overflow:
        hidden;

}

/* Eigene, schlankere Variante für den Header:
   kein overflow:hidden auf dem Header selbst, damit das
   mobile Ausklapp-Menü nicht abgeschnitten wird. Geclippt
   wird stattdessen nur der Flocken-Layer selbst. */

.snowflakes--header {

    overflow:
        hidden;

}

.snowflakes {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        30;

}

.snowflake {

    position:
        absolute;

    top:
        -8%;

    border-radius:
        50%;

    background:
        var(--white);

    opacity:
        0.85;

    animation-name:
        snow-fall,
        snow-sway;

    animation-timing-function:
        linear,
        ease-in-out;

    animation-iteration-count:
        infinite,
        infinite;

}

/* Animation */
@keyframes splash-pulse {

    0%,
    100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

}

/* Animation */
@keyframes splash-fill {

    from {

        width: 0%;

    }

    to {

        width: 100%;

    }

}

/* Animation */
@keyframes gallery-scroll {

    /* läuft von links nach rechts */

    from {

        transform:
            translateX(-50%);

    }

    to {

        transform:
            translateX(0);

    }

}

/* Animation */
@keyframes snow-fall {

    from {

        transform:
            translateY(-10%);

    }

    to {

        transform:
            translateY(1100%);

    }

}

/* Animation */
@keyframes snow-sway {

    0%,
    100% {

        margin-left:
            0;

    }

    50% {

        margin-left:
            22px;

    }

}

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

@media (max-width: 900px) {

.hero {

        padding:
            55px 40px 65px;

    }

.hero-inner {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }

.hero-picture {

        order:
            -1;

    }

.hero-text {

        margin:
            auto;

    }

.hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }

.hero-buttons {

        justify-content:
            center;

    }

.hero-picture {

        min-height:
            420px;

    }

.rondell-wrapper {

        margin:
            0 -40px;

    }

.rondell-stage {

        height:
            480px;

    }

.rondell-slide {

        width:
            280px;

    }

.rondell-slide[data-slot="left"] {

        transform:
            translate(-50%, -50%)
            translateX(-285px)
            scale(0.78)
            rotateY(10deg);

    }

.rondell-slide[data-slot="right"] {

        transform:
            translate(-50%, -50%)
            translateX(285px)
            scale(0.78)
            rotateY(-10deg);

    }

.rondell-slide[data-slot="far-left"] {

        transform:
            translate(-50%, -50%)
            translateX(-460px)
            scale(0.58)
            rotateY(18deg);

    }

.rondell-slide[data-slot="far-right"] {

        transform:
            translate(-50%, -50%)
            translateX(460px)
            scale(0.58)
            rotateY(-18deg);

    }

.testimonial-nav {

        width:
            40px;
        height:
            40px;

    }

.testimonial-nav-prev {

        left:
            calc(50% - 158px);

    }

.testimonial-nav-next {

        left:
            calc(50% + 158px);

    }

.spotlight-grid {

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

        gap:
            14px;

    }

.about-section {

        padding-left:
            40px;

        padding-right:
            40px;

        background-image:
            url("../images/galerie-tablet.svg");

    }

.about-content {

        gap:
            32px;

    }

.about-picture img {

        width:
            240px;

    }

.content-section.spotlight {

        background-image:
            url("../images/neubeliebt-tablet.svg");

    }

.content-section.testimonials {

        background-image:
            url("../images/community-tablet.svg");

    }

}

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

@media (max-width: 700px) {

.values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

.value-card {
        padding: 22px 16px;
    }

.difficulty-cta .button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

.content-section.spotlight {

        padding-top:
            60px;

        padding-bottom:
            60px;

        background-image:
            url("../images/neubeliebt-mobil.svg");

    }

.content-section.testimonials {

        padding-top:
            60px;

        padding-bottom:
            60px;

        background-image:
            url("../images/community-mobil.svg");

    }

.about-section {

        padding-top:
            65px;

        padding-bottom:
            65px;

        padding-left:
            20px;

        padding-right:
            20px;

        background-image:
            url("../images/galerie-mobil.svg");

    }

.about-inner {

        gap:
            24px;

    }

.about-content {

        flex-direction:
            column;

        gap:
            24px;

    }

.about-picture img {

        width:
            220px;

        margin:
            0 auto;

    }

.gallery-item {

        width:
            120px;

    }

.hero {

        padding:
            55px 25px 60px;

    }

.hero h1 {

        font-size:
            clamp(
                2.8rem,
                13vw,
                4rem
            );

    }

.hero-picture {

        min-height:
            380px;

    }

.hero-image-frame {

        width:
            min(
                330px,
                85%
            );

    }

.rondell-wrapper {

        margin:
            0 -20px;

    }

.rondell-stage {

        height:
            440px;

    }

.rondell-slide {

        width:
            240px;

    }

.rondell-slide[data-slot="left"] {

        transform:
            translate(-50%, -50%)
            translateX(-230px)
            scale(0.72)
            rotateY(10deg);

    }

.rondell-slide[data-slot="right"] {

        transform:
            translate(-50%, -50%)
            translateX(230px)
            scale(0.72)
            rotateY(-10deg);

    }

.rondell-slide[data-slot="far-left"] {

        transform:
            translate(-50%, -50%)
            translateX(-330px)
            scale(0.5)
            rotateY(18deg);

    }

.rondell-slide[data-slot="far-right"] {

        transform:
            translate(-50%, -50%)
            translateX(330px)
            scale(0.5)
            rotateY(-18deg);

    }

.testimonial-nav {

        width:
            34px;
        height:
            34px;

    }

.testimonial-nav img {

        width:
            56px;
        height:
            56px;

    }

.testimonial-nav-prev {

        left:
            calc(50% - 132px);

    }

.testimonial-nav-next {

        left:
            calc(50% + 132px);

    }

.testimonial-card {

        width:
            240px;

        max-height:
            340px;

        padding:
            25px 20px 22px;

    }

.about-buttons {

        flex-wrap:
            nowrap;

        gap:
            10px;

    }

.about-buttons .button {

        flex:
            1;

        padding:
            12px 10px;

        font-size:
            0.72rem;

        white-space:
            normal;

        text-align:
            center;

    }

.spotlight-label,
.spotlight-flag {
        transform: translateY(-25px);
    }

}

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

@media (max-width: 420px) {

.hero h1 {

        font-size:
            2.65rem;

    }

}

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

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

.gallery-track,
.decor-circle,
.snowflake {

        animation:
            none !important;

    }

.snowflakes {

        display:
            none;

    }

}