/* SEO-Day Promo-Maus – Layout/Farben in CSS, Motion in GSAP
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | CSS-Transform entfernt (Konflikt mit GSAP xPercent)
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | CSS-Keyframes entfernt, Motion via GSAP
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Dom PNG transparent, Pfote klar, Animation hochwertig statt Spinner-Chaos
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Transparenter Kölner-Dom-Hintergrund
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Hochwertiger realistischer Schild-Haltearm
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Shirt mit Aufdruck KI-MAUS
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Stock mittig in Pfote, Schild nicht von Maus verdeckt
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Feinere realistische gemalte Felldetails
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Sichtbare Gesamtdauer ca. 8s (Enter/Spin/Exit)
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Schild in Pfote + spektakuläre Spinner-Rotation
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Süß, gemalt, Schild in Hand, große Augen, lange Schnurrhaare
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Lustigere Figur und Comedy-Bewegungen
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | ErstAnlage Promo-Maus
 */

.base-seoday-promo-mouse-root {
    position: fixed;
    right: 8px;
    bottom: 16px;
    z-index: 15000;
    width: min(520px, 98vw);
    max-width: 100%;
    pointer-events: none;
    /* Kein CSS-transform: kollidiert mit GSAP xPercent (Maus blieb außerhalb) */
    opacity: 0;
    visibility: hidden;
    box-sizing: border-box;
    padding: 16px 20px 12px 20px;
    background: rgba(255, 250, 241, 0.55);
    border-radius: 28px;
    /* Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Schild voll sichtbar, kein Abschneiden */
    overflow: visible;
}

/* Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Motion nur noch GSAP, CSS nur States */
.base-seoday-promo-mouse-root-ready {
    visibility: visible;
}

.base-seoday-promo-mouse-root-done {
    display: none;
}

/* Kölner Dom: detaillierte Silhouette, groß und klar erkennbar
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Dom groesser und voll sichtbar als Koelner Dom
 */
.base-seoday-promo-mouse-dom-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    width: 62%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: left bottom;
    opacity: 1;
    pointer-events: none;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.35));
}

.base-seoday-promo-mouse-dom-fill {
    fill: var(--color-promo-mouse-dom);
}

.base-seoday-promo-mouse-dom-deep-fill {
    fill: var(--color-promo-mouse-dom-deep);
}

.base-seoday-promo-mouse-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 300px;
    /* Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Stage laesst Schild voll sichtbar */
    overflow: visible;
}

.base-seoday-promo-mouse-actor {
    position: relative;
    width: 100%;
    min-height: 300px;
    transform-origin: 75% 100%;
    overflow: visible;
}

/* Prop: Schild oben, Greif-Arm darunter (Koerper-SVG liegt darueber fuer Shirt-Aufdruck)
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | KI-MAUS auf Shirt-Bauch, Arm unter Koerper-SVG
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Arm an Koerper/Aermel herangerueckt
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Prop fuer durchgehenden Arm ohne Koerper-Haltearm
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Schild breiter und voll sichtbar
 */
.base-seoday-promo-mouse-prop {
    position: absolute;
    left: 4px;
    bottom: 78px;
    z-index: 6;
    width: min(340px, 78vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform-origin: 90% 100%;
    overflow: visible;
}

.base-seoday-promo-mouse-sign {
    position: relative;
    z-index: 8;
    width: 100%;
    min-width: 220px;
    padding: 14px 16px;
    background: linear-gradient(165deg, var(--color-promo-mouse-sign-board), var(--color-promo-mouse-fur-light));
    border: 3px solid var(--color-promo-mouse-sign-border);
    border-radius: 12px;
    box-sizing: border-box;
    overflow: visible;
}

.base-seoday-promo-mouse-sign-text {
    margin: 0;
    color: var(--color-promo-mouse-sign-text);
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    text-align: center;
}

/* Greif-Arm etwas zur Seite (Schild weiter links), Schulter bleibt am Aermel
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Arm etwas weiter zur Seite
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Arm an Koerper/Aermel herangerueckt
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Maus simpler neu gezeichnet
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Maus komplett neu: Arm nur im Prop-SVG
 */
.base-seoday-promo-mouse-stick-grip {
    position: relative;
    z-index: 1;
    width: 118px;
    height: 188px;
    margin-top: -28px;
    margin-left: auto;
    margin-right: 28px;
    align-self: flex-end;
}

.base-seoday-promo-mouse-stick-grip-svg {
    display: block;
    width: 118px;
    height: 188px;
    overflow: visible;
}

.base-seoday-promo-mouse-stick-fill {
    fill: var(--color-promo-mouse-stick);
}

.base-seoday-promo-mouse-svg {
    position: absolute;
    right: -12px;
    bottom: 0;
    z-index: 12;
    width: 230px;
    height: 300px;
    overflow: visible;
}

/* KI-MAUS: aufgemalter Shirt-Bauch-Aufdruck
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | KI-MAUS als Shirt-Aufdruck auf dem Bauch
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | KI-MAUS als Vordergrund-Label ueber den Armen
 * Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | KI-MAUS groesser und kontrastreicher lesbar
 */
.base-seoday-promo-mouse-shirt-text {
    fill: var(--color-promo-mouse-shirt-text);
    stroke: var(--color-promo-mouse-outline);
    stroke-width: 2.8px;
    paint-order: stroke fill;
    font-family: var(--font-family-primary);
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
}

.base-seoday-promo-mouse-shirt-label-front {
    display: none;
}

.base-seoday-promo-mouse-fur-fill {
    fill: var(--color-promo-mouse-fur);
}

.base-seoday-promo-mouse-fur-deep-fill {
    fill: var(--color-promo-mouse-fur-deep);
}

.base-seoday-promo-mouse-fur-mid-fill {
    fill: var(--color-promo-mouse-fur-mid);
}

.base-seoday-promo-mouse-fur-light-fill {
    fill: var(--color-promo-mouse-fur-light);
}

.base-seoday-promo-mouse-fur-warm-fill {
    fill: var(--color-promo-mouse-fur-warm);
}

.base-seoday-promo-mouse-ear-inner-fill {
    fill: var(--color-promo-mouse-ear-inner);
}

.base-seoday-promo-mouse-ear-vein-stroke {
    fill: none;
    stroke: var(--color-promo-mouse-ear-vein);
    stroke-width: 1.1;
    stroke-linecap: round;
    opacity: 0.55;
}

.base-seoday-promo-mouse-outline-stroke {
    stroke: var(--color-promo-mouse-outline);
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.base-seoday-promo-mouse-outline-soft-stroke {
    stroke: var(--color-promo-mouse-outline-soft);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.base-seoday-promo-mouse-path-only {
    fill: none;
}

.base-seoday-promo-mouse-whisker-stroke {
    fill: none;
    stroke: var(--color-promo-mouse-whisker);
    stroke-width: 1.15;
    stroke-linecap: round;
    opacity: 0.88;
}

.base-seoday-promo-mouse-whisker-stroke-soft {
    fill: none;
    stroke: var(--color-promo-mouse-whisker);
    stroke-width: 0.9;
    stroke-linecap: round;
    opacity: 0.55;
}

.base-seoday-promo-mouse-nose-fill {
    fill: var(--color-promo-mouse-nose);
}

.base-seoday-promo-mouse-nose-shadow-fill {
    fill: var(--color-promo-mouse-nose-shadow);
}

.base-seoday-promo-mouse-cheek-fill {
    fill: var(--color-promo-mouse-cheek);
    opacity: 0.72;
}

.base-seoday-promo-mouse-eye-white-fill {
    fill: var(--color-promo-mouse-eye-white);
}

.base-seoday-promo-mouse-eye-iris-fill {
    fill: var(--color-promo-mouse-eye-iris);
}

.base-seoday-promo-mouse-eye-iris-dark-fill {
    fill: var(--color-promo-mouse-eye-iris-dark);
}

.base-seoday-promo-mouse-eye-pupil-fill {
    fill: var(--color-promo-mouse-eye-pupil);
}

.base-seoday-promo-mouse-paw-pad-fill {
    fill: var(--color-promo-mouse-paw-pad);
    opacity: 0.9;
}

.base-seoday-promo-mouse-shirt-fill {
    fill: var(--color-promo-mouse-shirt);
}

.base-seoday-promo-mouse-shirt-shade-fill {
    fill: var(--color-promo-mouse-shirt-shade);
}

.base-seoday-promo-mouse-shirt-accent-fill {
    fill: var(--color-promo-mouse-shirt-accent);
}

.base-seoday-promo-mouse-shadow-fill {
    fill: var(--color-promo-mouse-shadow);
}

.base-seoday-promo-mouse-leg-left {
    transform-origin: 110px 222px;
}

.base-seoday-promo-mouse-leg-right {
    transform-origin: 154px 222px;
}

.base-seoday-promo-mouse-ear-left {
    transform-origin: 74px 68px;
}

.base-seoday-promo-mouse-ear-right {
    transform-origin: 170px 68px;
}

.base-seoday-promo-mouse-tail {
    transform-origin: 178px 180px;
}

.base-seoday-promo-mouse-head {
    transform-origin: 130px 120px;
}

.base-seoday-promo-mouse-eyelid-left {
    transform-origin: 104px 96px;
    transform-box: fill-box;
    transform: scaleY(0);
}

.base-seoday-promo-mouse-eyelid-right {
    transform-origin: 148px 94px;
    transform-box: fill-box;
    transform: scaleY(0);
}

/* Sanfter hochwertiger Schild-Schwenk (keine wilden Mehrfach-Drehungen) */
@media (min-width: 600px) {
    .base-seoday-promo-mouse-root {
        width: 560px;
        bottom: 24px;
        right: 16px;
    }

    /* Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Dom Desktop groesser und voll deckend */
    .base-seoday-promo-mouse-dom-bg {
        opacity: 1;
        width: 58%;
        left: 0;
    }

    .base-seoday-promo-mouse-sign-text {
        font-size: 15px;
    }

    .base-seoday-promo-mouse-svg {
        width: 255px;
        height: 320px;
        right: -8px;
    }

    .base-seoday-promo-mouse-stage {
        min-height: 320px;
    }

    .base-seoday-promo-mouse-actor {
        min-height: 320px;
    }

    /* Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Desktop Arm am Aermel */
    .base-seoday-promo-mouse-prop {
        bottom: 82px;
        width: 380px;
        left: 8px;
    }

    /* Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Desktop Arm etwas zur Seite */
    .base-seoday-promo-mouse-stick-grip {
        margin-left: auto;
        margin-right: 32px;
        width: 128px;
        height: 200px;
    }

    .base-seoday-promo-mouse-stick-grip-svg {
        width: 128px;
        height: 200px;
    }

    .base-seoday-promo-mouse-shirt-text {
        font-size: 24px;
        stroke-width: 3px;
    }
}

@media (min-width: 1024px) {
    .base-seoday-promo-mouse-root {
        width: 600px;
        bottom: 32px;
    }

    /* Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Wide-Desktop Arm am Aermel */
    .base-seoday-promo-mouse-prop {
        width: 410px;
        left: 12px;
        bottom: 86px;
    }

    /* Änderungsprotokoll: 2026-07-17 | cursor-agent | @skill-css-rules, @skill-change-provenance | Wide-Desktop Arm etwas zur Seite */
    .base-seoday-promo-mouse-stick-grip {
        margin-left: auto;
        margin-right: 36px;
        width: 134px;
        height: 210px;
    }

    .base-seoday-promo-mouse-stick-grip-svg {
        width: 134px;
        height: 210px;
    }

    .base-seoday-promo-mouse-sign-text {
        font-size: 16px;
    }

    .base-seoday-promo-mouse-svg {
        width: 275px;
        height: 340px;
        right: -4px;
    }

    .base-seoday-promo-mouse-stage {
        min-height: 340px;
    }

    .base-seoday-promo-mouse-actor {
        min-height: 340px;
    }

    .base-seoday-promo-mouse-shirt-text {
        font-size: 26px;
        stroke-width: 3.2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .base-seoday-promo-mouse-root {
        display: none;
    }
}