
:root{
    --green:#07583d;
    --green2:#0b805c;
    --ink:#111d18;
    --muted:#6e7d76;
    --gold:#f4c31e;
}

*{box-sizing:border-box}

html,body{
    margin:0;
    background:#f5f8f6;
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

body{min-height:100vh;padding-bottom:96px}

.gp-topbar{
    position:sticky;
    top:0;
    z-index:100;
    background:linear-gradient(90deg,#07583d,#0b805c);
}

.gp-topbar-inner{
    width:min(1100px,100%);
    min-height:72px;
    margin:auto;
    padding:0 18px;
    display:flex;
    align-items:center;
    gap:20px;
}

.gp-brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
}

.gp-logo{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#fff;
    color:#07583d;
    font-weight:950;
    font-size:16px;
}

.gp-brand-copy strong{
    display:block;
    font-size:26px;
    line-height:1;
    letter-spacing:.02em;
}

.gp-brand-copy small{
    display:block;
    margin-top:4px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

.gp-desktop-nav{
    margin-left:auto;
    display:flex;
    gap:28px;
    align-items:center;
}

.gp-desktop-nav a{
    position:relative;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
}

.gp-desktop-nav a.active{
    color:#ffe05c;
}

.gp-desktop-nav a.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-10px;
    height:4px;
    border-radius:999px;
    background:#ffd51d;
}

.gp-head-icons{
    display:flex;
    gap:16px;
    margin-left:14px;
}

.gp-search-icon,
.gp-menu-icon{
    width:34px;
    height:34px;
    position:relative;
    display:block;
}

.gp-search-icon::before{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    border:3px solid #fff;
    border-radius:50%;
    left:2px;
    top:2px;
}

.gp-search-icon::after{
    content:"";
    position:absolute;
    width:13px;
    height:3px;
    background:#fff;
    transform:rotate(45deg);
    left:20px;
    top:22px;
    border-radius:3px;
}

.gp-menu-icon::before,
.gp-menu-icon::after{
    content:"";
    position:absolute;
    left:2px;
    right:2px;
    height:3px;
    background:#fff;
    border-radius:3px;
}

.gp-menu-icon::before{top:9px}
.gp-menu-icon::after{top:21px}

.gp-page{
    width:min(1100px,100%);
    margin:auto;
    background:#fff;
    box-shadow:0 0 40px rgba(0,0,0,.04);
}

.gp-hero{
    position:relative;
    min-height:470px;
    overflow:hidden;
    border-radius:0 0 38px 38px;

    background:
        linear-gradient(90deg,rgba(0,28,22,.82) 0%,rgba(0,28,22,.42) 42%,rgba(0,28,22,.08) 70%),
        radial-gradient(circle at 80% 22%,rgba(255,255,255,.75),rgba(255,255,255,0) 18%),
        linear-gradient(180deg,#6bc5ef 0 38%,#356f42 38% 62%,#23472f 62% 100%);
}

.gp-hero::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.9;
    background:
        linear-gradient(145deg,transparent 0 50%,rgba(255,255,255,.22) 50% 52%,transparent 52%),
        radial-gradient(circle at 72% 55%,rgba(255,255,255,.25),transparent 27%);
}

.gp-hero-overlay{
    position:absolute;
    inset:auto 0 0 0;
    height:120px;
    background:
        linear-gradient(180deg,transparent,rgba(5,40,28,.55));
}

.gp-hero-content{
    position:relative;
    z-index:2;
    width:55%;
    padding:58px 48px 40px;
    color:#fff;
}

.gp-kicker{
    display:block;
    font-size:15px;
    font-weight:900;
    letter-spacing:.23em;
}

.gp-hero h1{
    margin:14px 0 10px;
    font-size:clamp(42px,6vw,72px);
    line-height:.98;
    letter-spacing:-.045em;
    font-weight:950;
}

.gp-hero h1 span{
    color:#ffd84d;
}

.gp-hero p{
    max-width:480px;
    margin:0;
    font-size:24px;
    line-height:1.1;
    font-weight:800;
}

.gp-yellow-line{
    width:74px;
    height:7px;
    margin-top:22px;
    border-radius:99px;
    background:#ffda22;
}

.gp-script{
    margin-top:18px;
    font-size:30px;
    font-style:italic;
    font-weight:600;
    transform:rotate(-5deg);
}

.gp-vignette-area{
    position:absolute;
    z-index:3;
    right:24px;
    top:26px;
    width:42%;
    height:400px;
}

.gp-vignette-card{
    position:absolute;
    right:80px;
    top:28px;
    width:235px;
    height:330px;
    padding:18px;
    border-radius:18px;
    transform:rotate(8deg);
    background:
        linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,195,230,.7)),
        linear-gradient(45deg,#5ac9e8,#f9d6f0);
    border:3px solid rgba(255,255,255,.75);
    box-shadow:0 16px 35px rgba(0,0,0,.22);
}

.gp-swiss-cross{
    width:88px;
    height:76px;
    display:grid;
    place-items:center;
    background:#e9212c;
    color:#fff;
    font-size:66px;
    font-weight:950;
    line-height:1;
}

.gp-year{
    margin-top:8px;
    font-size:118px;
    font-weight:950;
    line-height:.9;
    color:#050505;
}

.gp-road-sign{
    position:absolute;
    right:18px;
    bottom:18px;
    width:72px;
    height:78px;
    display:grid;
    place-items:center;
    background:#0d7c52;
    border:4px solid #fff;
    color:#fff;
    font-size:38px;
    font-weight:950;
}

.gp-tip-bubble{
    position:absolute;
    left:10px;
    top:4px;
    width:112px;
    height:112px;
    display:grid;
    place-items:center;
    text-align:center;
    border-radius:50%;
    background:#ffd447;
    color:#0e1c17;
    font-weight:950;
    font-size:20px;
    line-height:1.05;
    transform:rotate(-7deg);
    box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.gp-road-board{
    position:absolute;
    right:0;
    bottom:8px;
    width:120px;
    min-height:152px;
    padding:14px 10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
    justify-content:center;
    background:#0c6d4d;
    color:#fff;
    border:3px solid #fff;
    border-radius:10px;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.gp-road-board strong,
.gp-road-board span{
    font-size:14px;
    letter-spacing:.02em;
}

.gp-game{
    padding:0 48px;
    transform:translateY(-16px);
}

.gp-color-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
}

.gp-color-card{
    min-height:160px;
    padding:18px 12px 14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:2px solid rgba(255,255,255,.85);
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 22px rgba(0,0,0,.09);
    cursor:pointer;
    transition:.16s ease;
}

.gp-color-card:nth-child(1){background:#effaf4}
.gp-color-card:nth-child(2){background:#eef5ff}
.gp-color-card:nth-child(3){background:#fff0f0}
.gp-color-card:nth-child(4){background:#fff8e5}
.gp-color-card:nth-child(5){background:#f6edff}

.gp-color-card:hover,
.gp-color-card.selected{
    transform:translateY(-4px);
    box-shadow:0 16px 28px rgba(0,0,0,.12);
}

.gp-color-card.selected{
    outline:3px solid #0b805c;
}

.gp-color-card input{
    position:absolute;
    opacity:0;
}

.gp-color-circle{
    width:78px;
    height:78px;
    border-radius:50%;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 5px 12px rgba(0,0,0,.13);
}

.gp-color-circle.green{background:#17a66a}
.gp-color-circle.blue{background:#2f75de}
.gp-color-circle.red{background:#df3545}
.gp-color-circle.yellow{background:#f3c321}
.gp-color-circle.violet{background:#9147d9}

.gp-color-card strong{
    font-size:21px;
    font-weight:950;
}

.gp-email-box{
    position:relative;
    margin:22px 34px 0;
    min-height:84px;
    padding:0 20px;
    display:grid;
    grid-template-columns:54px 1fr;
    align-items:center;
    gap:14px;
    border:1px solid #dae3df;
    border-radius:20px;
    background:#fff;
    box-shadow:0 7px 20px rgba(0,0,0,.05);
}

.gp-mail-icon{
    font-size:36px;
    color:#6a7a73;
}

.gp-email-copy strong{
    display:block;
    font-size:16px;
    color:#687871;
}

.gp-email-copy small{
    display:block;
    margin-top:4px;
    color:#64736c;
}

.gp-email-box input{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:text;
}

.gp-submit{
    width:calc(100% - 68px);
    min-height:74px;
    margin:16px 34px 0;
    padding:0 28px;
    display:grid;
    grid-template-columns:48px 1fr 40px;
    align-items:center;
    border:0;
    border-radius:20px;
    background:linear-gradient(90deg,#0ca067,#076644);
    color:#fff;
    font-size:24px;
    font-weight:950;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(6,100,68,.18);
}

.gp-plane{font-size:32px}
.gp-arrow{font-size:42px;line-height:1}

.gp-secure{
    margin-top:10px;
    text-align:center;
    color:#26453a;
    font-size:12px;
}

.gp-message{
    width:calc(100% - 68px);
    margin:12px 34px 0;
    padding:12px 14px;
    border-radius:12px;
    font-weight:800;
}

.gp-message.error{
    background:#fff0f0;
    color:#a51f28;
}

.gp-message.success{
    background:#edf8f3;
    color:#07583d;
}

.gp-prizes{
    padding:24px 48px 8px;
}

.gp-prize-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.gp-trophy{font-size:30px}

.gp-prize-title h2{
    margin:0;
    font-size:28px;
    font-weight:950;
}

.gp-prize-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:18px;
}

.gp-prize-card{
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.gp-prize-media{
    position:relative;
    height:150px;
}

.gp-prize-media.fuel{
    background:
        radial-gradient(circle at 70% 30%,rgba(255,255,255,.2),transparent 20%),
        linear-gradient(130deg,#0e2d21,#166c4c 40%,#051b14);
}

.gp-prize-media.fuel::after{
    content:"";
    position:absolute;
    left:26px;
    bottom:18px;
    width:190px;
    height:38px;
    border-radius:20px;
    background:#0d6d4e;
    transform:rotate(-14deg);
}

.gp-prize-media.vignette{
    display:grid;
    place-items:center;
    background:linear-gradient(180deg,#7ec6ef,#527d55);
}

.gp-mini-vignette{
    width:92px;
    height:118px;
    border-radius:8px;
    background:linear-gradient(145deg,#ffc7ea,#8ad5e9);
    transform:rotate(4deg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:2px solid #fff;
}

.gp-mini-vignette span{
    width:42px;
    height:34px;
    display:grid;
    place-items:center;
    background:#e7202d;
    color:#fff;
    font-size:30px;
    font-weight:950;
}

.gp-mini-vignette b{
    font-size:46px;
    line-height:1;
}

.gp-prize-media.gift{
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#f5f1e9,#fff);
}

.gp-gift-box{
    position:relative;
    width:105px;
    height:80px;
    background:#fff;
    box-shadow:0 10px 20px rgba(0,0,0,.12);
}

.gp-gift-ribbon-v{
    position:absolute;
    top:0;
    bottom:0;
    left:44px;
    width:17px;
    background:#0c6d4d;
}

.gp-gift-ribbon-h{
    position:absolute;
    left:0;
    right:0;
    top:25px;
    height:17px;
    background:#0c6d4d;
}

.gp-prize-badge{
    position:absolute;
    right:10px;
    top:10px;
    width:62px;
    height:62px;
    border-radius:50%;
    background:#ffd22f;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#1b241f;
}

.gp-prize-badge strong{
    font-size:22px;
    line-height:1;
}

.gp-prize-badge span{
    font-size:10px;
    font-weight:900;
}

.gp-prize-body{
    padding:14px 10px 18px;
    text-align:center;
}

.gp-prize-body span{
    display:block;
    font-size:14px;
    font-weight:900;
}

.gp-prize-body strong{
    display:block;
    margin-top:2px;
    color:#07583d;
    font-size:24px;
    line-height:1.05;
}

.gp-prize-body small{
    display:block;
    margin-top:6px;
    color:#6c7b74;
    font-size:11px;
}

.gp-benefits{
    padding:30px 48px 8px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.gp-benefit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:#627169;
    font-weight:800;
}

.gp-benefit-icon{
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#ddf6ec;
    font-size:28px;
    color:#07583d;
}

.gp-legal{
    padding:22px 48px 36px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    color:#67766f;
    font-size:11px;
}

.gp-legal a{
    color:#5b6d65;
}

@media(max-width:800px){
    .gp-desktop-nav{display:none}
    .gp-head-icons{margin-left:auto}

    .gp-hero{
        min-height:520px;
        border-radius:0 0 28px 28px;
    }

    .gp-hero-content{
        width:100%;
        padding:34px 24px 0;
    }

    .gp-hero h1{
        font-size:44px;
        max-width:580px;
    }

    .gp-hero p{font-size:18px}

    .gp-vignette-area{
        right:8px;
        top:180px;
        width:55%;
        transform:scale(.83);
        transform-origin:top right;
    }

    .gp-game{
        padding:0 10px;
    }

    .gp-color-row{
        gap:6px;
    }

    .gp-color-card{
        min-height:120px;
        padding:10px 4px;
    }

    .gp-color-circle{
        width:58px;
        height:58px;
    }

    .gp-color-card strong{
        font-size:14px;
    }

    .gp-email-box,
    .gp-submit,
    .gp-message{
        margin-left:0;
        margin-right:0;
        width:100%;
    }

    .gp-prizes{
        padding:22px 10px 8px;
    }

    .gp-prize-title h2{
        font-size:21px;
    }

    .gp-prize-grid{
        gap:8px;
    }

    .gp-prize-media{height:110px}
    .gp-prize-body strong{font-size:17px}
    .gp-prize-body span{font-size:11px}

    .gp-benefits{
        padding:22px 12px 8px;
        gap:8px;
    }

    .gp-benefit{
        flex-direction:column;
        text-align:center;
        font-size:11px;
    }

    .gp-legal{
        padding:18px 14px 28px;
        text-align:center;
    }
}

@media(max-width:560px){
    .gp-topbar-inner{
        min-height:64px;
        padding:0 10px;
    }

    .gp-logo{
        width:44px;
        height:44px;
    }

    .gp-brand-copy strong{
        font-size:20px;
    }

    .gp-brand-copy small{
        font-size:8px;
    }

    .gp-head-icons{display:none}

    .gp-hero{
        min-height:560px;
    }

    .gp-hero-content{
        padding:26px 18px 0;
    }

    .gp-kicker{
        font-size:11px;
    }

    .gp-hero h1{
        font-size:36px;
    }

    .gp-script{
        font-size:23px;
    }

    .gp-vignette-area{
        width:72%;
        top:238px;
        right:-10px;
        transform:scale(.72);
    }

    .gp-color-row{
        grid-template-columns:repeat(5,1fr);
        overflow-x:auto;
        padding-bottom:4px;
    }

    .gp-color-card{
        min-width:100px;
    }

    .gp-submit{
        min-height:62px;
        grid-template-columns:40px 1fr 30px;
        font-size:17px;
    }

    .gp-prize-grid{
        grid-template-columns:1fr;
    }

    .gp-prize-media{
        height:150px;
    }

    .gp-benefits{
        grid-template-columns:repeat(3,1fr);
    }
}

/* ==========================================
   REAL IMAGE VERSION + MOBILE FRIENDLY
   ========================================== */

/* HERO */

.gp-hero{
    position:relative !important;
    min-height:470px !important;

    overflow:hidden !important;

    border-radius:
        0 0 38px 38px !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,28,22,.62) 0%,
            rgba(0,28,22,.34) 42%,
            rgba(0,28,22,.08) 72%
        ),
        url('/assets/gewinnspiel-header.png')
        center center / cover no-repeat
        !important;
}

/* echte Vignette rechts */

.gp-vignette-area{
    position:absolute !important;
    z-index:3 !important;

    right:24px !important;
    top:32px !important;

    width:42% !important;
    height:400px !important;
}

.gp-vignette-card{
    position:absolute !important;

    right:52px !important;
    top:18px !important;

    width:245px !important;
    height:330px !important;

    border:0 !important;
    border-radius:18px !important;

    background:
        url('/assets/gewinnspiel-vignette.png')
        center center / cover no-repeat
        !important;

    transform:
        rotate(5deg) !important;

    box-shadow:
        0 18px 38px
        rgba(0,0,0,.24)
        !important;

    overflow:hidden !important;
}

/* alte künstliche Elemente unsichtbar */

.gp-vignette-card
.gp-swiss-cross,
.gp-vignette-card
.gp-year,
.gp-vignette-card
.gp-road-sign{
    display:none !important;
}


/* ==========================================
   PRIZE IMAGES
   ========================================== */

.gp-prize-media.fuel{
    background:
        url('/assets/gewinnspiel-tankgutschein.png')
        center center / cover no-repeat
        !important;
}

.gp-prize-media.fuel::after{
    display:none !important;
}


.gp-prize-media.vignette{
    background:
        url('/assets/gewinnspiel-vignette-preis.png')
        center center / cover no-repeat
        !important;
}

.gp-mini-vignette{
    display:none !important;
}


.gp-prize-media.gift{
    background:
        url('/assets/gewinnspiel-geschenk.png')
        center center / cover no-repeat
        !important;
}

.gp-gift-box{
    display:none !important;
}


/* ==========================================
   DESKTOP IMAGE IMPROVEMENTS
   ========================================== */

.gp-prize-media{
    height:180px !important;
}

.gp-prize-card{
    overflow:hidden !important;

    border-radius:18px !important;

    background:#fff !important;

    box-shadow:
        0 10px 28px
        rgba(13,50,38,.10)
        !important;
}

.gp-prize-media::after{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 56%,
            rgba(0,0,0,.18)
        );
}


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

@media(max-width:700px){

    .gp-page{
        width:100% !important;

        overflow:hidden !important;
    }


    /* HEADER */

    .gp-topbar-inner{
        min-height:60px !important;

        padding:
            0 12px !important;
    }

    .gp-logo{
        width:42px !important;
        height:42px !important;

        border-radius:11px !important;

        font-size:14px !important;
    }

    .gp-brand-copy strong{
        font-size:18px !important;
    }

    .gp-brand-copy small{
        font-size:7px !important;
    }

    .gp-desktop-nav,
    .gp-head-icons{
        display:none !important;
    }


    /* HERO */

    .gp-hero{
        min-height:530px !important;

        border-radius:
            0 0 24px 24px !important;

        background-position:
            58% center !important;
    }

    .gp-hero-content{
        position:relative !important;

        z-index:4 !important;

        width:100% !important;

        padding:
            24px 18px 0 !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,28,22,.64),
                rgba(0,28,22,.15),
                transparent
            );
    }

    .gp-kicker{
        font-size:10px !important;

        letter-spacing:.18em !important;
    }

    .gp-hero h1{
        max-width:390px !important;

        margin:
            10px 0 8px !important;

        font-size:
            clamp(
                32px,
                10vw,
                44px
            ) !important;

        line-height:
            .98 !important;
    }

    .gp-hero p{
        max-width:310px !important;

        font-size:15px !important;

        line-height:1.25 !important;
    }

    .gp-yellow-line{
        width:56px !important;
        height:5px !important;

        margin-top:13px !important;
    }

    .gp-script{
        max-width:250px !important;

        margin-top:12px !important;

        font-size:22px !important;
    }


    /* VIGNETTE MOBILE */

    .gp-vignette-area{
        right:-18px !important;
        top:232px !important;

        width:68% !important;
        height:270px !important;

        transform:
            none !important;
    }

    .gp-vignette-card{
        right:18px !important;
        top:8px !important;

        width:180px !important;
        height:230px !important;

        transform:
            rotate(4deg) !important;

        border-radius:14px !important;
    }

    .gp-tip-bubble{
        left:-10px !important;
        top:0 !important;

        width:82px !important;
        height:82px !important;

        font-size:14px !important;
    }

    .gp-road-board{
        display:none !important;
    }


    /* COLOR GAME */

    .gp-game{
        padding:
            0 10px !important;

        transform:
            translateY(-8px)
            !important;
    }

    .gp-color-row{
        display:grid !important;

        grid-template-columns:
            repeat(5,1fr)
            !important;

        gap:6px !important;

        overflow-x:auto !important;

        scrollbar-width:none !important;
    }

    .gp-color-row::-webkit-scrollbar{
        display:none !important;
    }

    .gp-color-card{
        min-width:86px !important;
        min-height:105px !important;

        padding:
            9px 5px !important;

        border-radius:14px !important;

        gap:8px !important;
    }

    .gp-color-circle{
        width:50px !important;
        height:50px !important;
    }

    .gp-color-card strong{
        font-size:12px !important;
    }


    /* E-MAIL */

    .gp-email-box{
        min-height:68px !important;

        margin:
            12px 0 0 !important;

        padding:
            0 12px !important;

        grid-template-columns:
            40px 1fr !important;

        gap:9px !important;

        border-radius:14px !important;
    }

    .gp-mail-icon{
        font-size:26px !important;
    }

    .gp-email-copy strong{
        font-size:12px !important;
    }

    .gp-email-copy small{
        font-size:9px !important;
    }


    /* CTA */

    .gp-submit{
        width:100% !important;

        min-height:58px !important;

        margin:
            10px 0 0 !important;

        padding:
            0 14px !important;

        grid-template-columns:
            32px 1fr 24px !important;

        border-radius:14px !important;

        font-size:16px !important;
    }

    .gp-plane{
        font-size:22px !important;
    }

    .gp-arrow{
        font-size:30px !important;
    }

    .gp-secure{
        padding:
            0 8px !important;

        font-size:9px !important;
    }


    /* PRIZES */

    .gp-prizes{
        padding:
            18px 10px 6px !important;
    }

    .gp-prize-title{
        gap:7px !important;
    }

    .gp-prize-title h2{
        font-size:19px !important;
    }

    .gp-trophy{
        font-size:23px !important;
    }

    .gp-prize-grid{
        display:grid !important;

        grid-template-columns:
            1fr !important;

        gap:10px !important;

        margin-top:12px !important;
    }

    .gp-prize-media{
        height:190px !important;
    }

    .gp-prize-body{
        padding:
            12px 10px 14px !important;
    }

    .gp-prize-body span{
        font-size:11px !important;
    }

    .gp-prize-body strong{
        font-size:20px !important;
    }

    .gp-prize-body small{
        font-size:10px !important;
    }

    .gp-prize-badge{
        width:54px !important;
        height:54px !important;
    }

    .gp-prize-badge strong{
        font-size:18px !important;
    }

    .gp-prize-badge span{
        font-size:8px !important;
    }


    /* BENEFITS */

    .gp-benefits{
        padding:
            18px 10px 4px !important;

        grid-template-columns:
            repeat(3,1fr)
            !important;

        gap:5px !important;
    }

    .gp-benefit{
        flex-direction:column !important;

        gap:5px !important;

        text-align:center !important;

        font-size:9px !important;
    }

    .gp-benefit-icon{
        width:44px !important;
        height:44px !important;

        font-size:20px !important;
    }


    /* LEGAL */

    .gp-legal{
        padding:
            16px 12px 26px !important;

        gap:6px !important;

        font-size:9px !important;

        line-height:1.4 !important;
    }

}


/* extra small phones */

@media(max-width:390px){

    .gp-hero{
        min-height:510px !important;
    }

    .gp-hero h1{
        font-size:31px !important;
    }

    .gp-vignette-area{
        top:235px !important;
    }

    .gp-vignette-card{
        width:165px !important;
        height:212px !important;
    }

    .gp-color-card{
        min-width:82px !important;
    }

}

/* ==========================================
   FINAL HERO: NUR DAS FERTIGE HEADERBILD
   ========================================== */

.gp-hero{
    position:relative !important;
    min-height:0 !important;
    height:auto !important;

    aspect-ratio:1903 / 826 !important;

    overflow:hidden !important;

    border-radius:
        0 0 30px 30px !important;

    background:
        url('/assets/gewinnspiel-header-final.png')
        center center / cover no-repeat
        !important;
}

/* Keine doppelten Texte oder zweite Vignette */

.gp-hero-overlay,
.gp-hero-content,
.gp-vignette-area{
    display:none !important;
}


/* MOBILE */

@media(max-width:700px){

    .gp-hero{
        aspect-ratio:1903 / 826 !important;

        width:100% !important;

        min-height:0 !important;

        background-size:cover !important;
        background-position:center center !important;

        border-radius:
            0 0 20px 20px !important;
    }

}


/*
 * Auf sehr schmalen Geräten lieber das komplette Banner
 * zeigen statt Text abzuschneiden.
 */
@media(max-width:480px){

    .gp-hero{
        aspect-ratio:1903 / 826 !important;

        background-size:contain !important;
        background-position:center top !important;
        background-repeat:no-repeat !important;

        background-color:#0b533d !important;

        border-radius:
            0 0 16px 16px !important;
    }

}

/* ===== E-MAIL INPUT FIX ===== */

.gp-email-box{
    position:relative !important;
    display:grid !important;
    grid-template-columns:44px 1fr !important;
    align-items:center !important;
    gap:12px !important;

    padding:12px 14px !important;
}

.gp-email-copy{
    display:none !important;
}

.gp-email-box input{
    position:static !important;

    width:100% !important;
    height:46px !important;

    opacity:1 !important;

    padding:0 12px !important;

    border:0 !important;
    outline:none !important;

    background:transparent !important;

    color:#14211c !important;

    font-size:15px !important;
    font-weight:600 !important;

    cursor:text !important;
}

.gp-email-box input::placeholder{
    color:#7b8881 !important;
    opacity:1 !important;
}

.gp-email-box:focus-within{
    border-color:#0b805c !important;

    box-shadow:
        0 0 0 3px
        rgba(11,128,92,.10)
        !important;
}

@media(max-width:700px){

    .gp-email-box{
        grid-template-columns:34px 1fr !important;
        min-height:62px !important;
        padding:8px 10px !important;
    }

    .gp-email-box input{
        height:44px !important;
        font-size:16px !important;
    }

}

/* ===== GEWINNSPIEL CONSENT ===== */

.gp-consent{
    width:calc(100% - 68px);

    margin:14px 34px 0;

    display:flex;
    align-items:flex-start;

    gap:10px;

    color:#5f6f67;

    font-size:11px;
    line-height:1.45;
}

.gp-consent input{
    width:18px;
    height:18px;

    margin:1px 0 0;

    flex:0 0 18px;

    accent-color:#0b805c;

    cursor:pointer;
}

.gp-consent span{
    flex:1;
}

.gp-consent a{
    color:#07583d;

    font-weight:900;
    text-decoration:underline;
}

@media(max-width:700px){

    .gp-consent{
        width:100%;

        margin:12px 0 0;

        padding:0 2px;

        font-size:9.5px;
    }

}


/* ==================================================
   SCANMIT GEWINN-BOOSTER
   ================================================== */

.gp-booster-overlay{
    position:fixed;
    inset:0;
    z-index:9999999;

    padding:
        max(18px,env(safe-area-inset-top))
        14px
        max(105px,calc(90px + env(safe-area-inset-bottom)));

    overflow-y:auto;

    background:
        linear-gradient(
            180deg,
            rgba(4,17,14,.90),
            rgba(3,12,10,.97)
        );

    backdrop-filter:
        blur(14px);
    -webkit-backdrop-filter:
        blur(14px);
}


.gp-booster{
    width:min(720px,100%);
    margin:0 auto;

    color:#fff;
}


.gp-booster-success{
    padding:18px 10px 24px;
    text-align:center;
}


.gp-booster-check{
    width:62px;
    height:62px;

    margin:0 auto 13px;

    display:grid;
    place-items:center;

    border:2px solid #d9b873;
    border-radius:50%;

    color:#e5c37f;

    font-size:31px;
    font-weight:500;
}


.gp-booster-eyebrow{
    display:block;

    color:#9ca9a4;

    font-size:9px;
    font-weight:800;
    letter-spacing:.18em;
}


.gp-booster-success h2{
    margin:8px 0 5px;

    color:#fff;

    font-size:
        clamp(30px,6vw,46px);

    line-height:1.05;
    font-weight:800;
    letter-spacing:-.035em;
}


.gp-booster-chance{
    margin:0;

    color:#dce2df;

    font-size:19px;
}


.gp-booster-chance strong{
    color:#e4c17a;
}


.gp-booster-thanks{
    max-width:430px;

    margin:13px auto 0;

    color:#aeb8b4;

    font-size:12px;
    line-height:1.45;
}


.gp-booster-premium{
    position:relative;

    padding:27px;

    overflow:hidden;

    border:
        1px solid
        rgba(221,184,111,.75);

    border-radius:20px;

    background:
        radial-gradient(
            circle at 88% 24%,
            rgba(197,154,78,.13),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #101b18,
            #07110e 70%
        );

    box-shadow:
        0 24px 60px
        rgba(0,0,0,.40);
}


.gp-booster-copy{
    width:68%;
}


.gp-booster-label{
    display:inline-flex;

    padding:6px 13px;

    border:
        1px solid
        rgba(218,185,121,.35);

    border-radius:8px;

    color:#d9c49b;

    font-size:9px;
    font-weight:800;
    letter-spacing:.20em;
}


.gp-booster-premium h3{
    margin:13px 0 9px;

    color:#fff;

    font-size:
        clamp(34px,6vw,52px);

    line-height:.98;

    font-weight:800;
    letter-spacing:-.04em;
}


.gp-booster-premium h3 span{
    color:#e0bd78;
}


.gp-booster-intro{
    margin:0;

    color:#d3dad7;

    font-size:14px;
    line-height:1.45;
}


.gp-booster-intro strong{
    color:#e4c17a;
}


.gp-booster-benefits{
    margin-top:22px;

    display:grid;

    gap:15px;
}


.gp-booster-benefit{
    display:grid;

    grid-template-columns:
        38px 1fr;

    gap:11px;

    align-items:center;
}


.gp-benefit-symbol{
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(225,191,124,.55);

    border-radius:10px;

    color:#e1be78;

    font-size:17px;
}


.gp-booster-benefit strong{
    display:block;

    color:#fff;

    font-size:12px;
    font-weight:750;
}


.gp-booster-benefit small{
    display:block;

    margin-top:2px;

    color:#8f9d97;

    font-size:9px;
    line-height:1.35;
}


.gp-booster-double{
    position:absolute;

    right:26px;
    top:35px;

    width:145px;
    height:145px;

    display:flex;
    flex-direction:column;

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

    border:
        2px solid
        #d8b46c;

    border-radius:50%;

    text-align:center;

    background:
        radial-gradient(
            circle,
            #15221e,
            #08110e
        );

    box-shadow:
        0 0 28px
        rgba(217,181,109,.20);
}


.gp-booster-double strong{
    color:#e5c27c;

    font-size:54px;
    line-height:.9;
}


.gp-booster-double span{
    margin-top:8px;

    color:#e5c27c;

    font-size:10px;
    font-weight:900;

    letter-spacing:.06em;
}


.gp-booster-double small{
    margin-top:3px;

    color:#fff;

    font-size:8px;
    letter-spacing:.08em;
}


.gp-booster-cta{
    min-height:62px;

    margin-top:26px;

    padding:0 24px;

    display:flex;

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

    gap:18px;

    border-radius:12px;

    background:
        linear-gradient(
            90deg,
            #cba55e,
            #efd092,
            #cba55e
        );

    color:#101814;

    text-decoration:none;

    font-size:16px;
    font-weight:850;

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.22);
}


.gp-booster-cta strong{
    font-size:25px;
}


.gp-booster-price{
    margin-top:10px;

    text-align:center;

    color:#8f9b96;

    font-size:8px;
    font-weight:700;

    letter-spacing:.13em;

    text-transform:uppercase;
}


.gp-booster-skip{
    display:block;

    width:max-content;

    margin:18px auto 0;

    padding:8px;

    color:#89948f;

    font-size:11px;

    text-decoration:none;

    border-bottom:
        1px solid
        rgba(255,255,255,.20);
}



/* MOBILE */

@media(max-width:620px){

    .gp-booster-overlay{
        padding-left:10px;
        padding-right:10px;
    }


    .gp-booster-success{
        padding-top:6px;
        padding-bottom:17px;
    }


    .gp-booster-check{
        width:50px;
        height:50px;

        font-size:25px;
    }


    .gp-booster-success h2{
        font-size:30px;
    }


    .gp-booster-chance{
        font-size:16px;
    }


    .gp-booster-premium{
        padding:19px 16px;
        border-radius:17px;
    }


    .gp-booster-copy{
        width:100%;
    }


    .gp-booster-premium h3{
        padding-right:104px;

        font-size:34px;
    }


    .gp-booster-intro{
        padding-right:100px;

        font-size:12px;
    }


    .gp-booster-double{
        right:15px;
        top:22px;

        width:94px;
        height:94px;
    }


    .gp-booster-double strong{
        font-size:37px;
    }


    .gp-booster-double span{
        margin-top:4px;
        font-size:7px;
    }


    .gp-booster-double small{
        font-size:6px;
    }


    .gp-booster-benefits{
        margin-top:20px;
        gap:12px;
    }


    .gp-booster-benefit{
        grid-template-columns:
            34px 1fr;
    }


    .gp-benefit-symbol{
        width:31px;
        height:31px;
    }


    .gp-booster-benefit strong{
        font-size:11px;
    }


    .gp-booster-benefit small{
        font-size:8px;
    }


    .gp-booster-cta{
        min-height:56px;

        margin-top:20px;

        padding:0 12px;

        font-size:14px;
    }

}

/* ===== GEWINNSPIEL TEILNAHMEBEDINGUNGEN ===== */

.gp-terms-link{
    margin:8px 34px 0;

    text-align:center;
}

.gp-terms-link a{
    color:#07583d;

    font-size:10px;
    font-weight:800;

    text-decoration:underline;
    text-underline-offset:2px;
}

@media(max-width:700px){

    .gp-terms-link{
        margin:8px 0 0;
    }

    .gp-terms-link a{
        font-size:9.5px;
    }

}
