/**
 * Slider-Home
 */
.vr-slider-home__item{
    position: relative;
}
.vr-slider-home__item--bonupload{
    background-position: 35% 0%;
}
.vr-bonupload-btn{
    position: absolute;
    z-index: 10;
    right: 15px;
    bottom: 300px;

    
}
@media (max-width: 991px){
    .vr-bonupload-btn a{
        font-size: 14px;
        padding: 10px 15px;
    }
}
.vr-wirtsmadl-boninfo{
    width: 239.52px;
    height: 152.3px;
    position: absolute;
    background-size: cover;
    top: 2.5px;
    right: 5px;
    background-image: url(../img/bonupload/bu_mob.png);
}
@media (min-width: 992px){
    .vr-wirtsmadl-boninfo{
        width: 385px;
        height: 244.81px;
        top: 171.8px;
        right: 55px;
        background-image: url(../img/bonupload/bu_desk.png);
    }
    .vr-bonupload-btn{
        z-index: 5; /* über der Zitrone (z-index 4) */
        right: 155px;
        bottom: 205px;
    }
}

/* Glücksradl-Promo im Slider-Header (ersetzt das alte boninfo-Bild).
   Bottom-positioniert, damit die Illu unabhängig von der Viewport-Höhe
   nah am Button "Zum Glücksradl Gewinnspiel" sitzt (Button ist ebenfalls
   bottom-positioniert). */
.vr-wirtsmadl-gluecksradlinfo{
    width: 240px;
    height: 240px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    bottom: 260px;
    right: 40px;
    background-image: url(/typo3conf/ext/vr_wirtsmadl_gluecksrad/Resources/Public/img/wheel-illu.png);
}
@media (min-width: 992px){
    .vr-wirtsmadl-gluecksradlinfo{
        width: 385px;
        height: 385px;
        bottom: 280px;
        right: 130px;
    }
}
/**
 * Detail-Page
 */
 .vr-bonupload-header{
    height: 435px;
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-image: url(../img/bonupload/header_mob.png);
    padding-top: 35px;
    position: relative;
}
@media (min-width: 992px){
    .vr-bonupload-header{
        height: 450px;
        padding-top: 25px;
        background-image: url(../img/bonupload/header_desk.png);
    }
}
.vr-bonupload-text{
    font-size: 20px;
    text-align: center;
    margin-top: 15px;
    color: #264979;
}
.vr-bonupload-text span{
    font-weight: 700;
}
.vr-bonupload-bonimg{
    height: 135px;
    width: auto;
}
@media (min-width: 992px){
    .vr-bonupload-bonimg{
        position: absolute;
        top: calc(50% - 67.5px);
        right: 8%;
    }
    .vr-bonupload-text{
        margin-top: 35px;
    }
}
/**
 * Detail-Form
 */
.vr-bonupload-form{
    background-color: #fff;
    min-height: 600px;
    position: relative;
    margin-top: 100px;
    margin-bottom: 50px;
}
.vr-bonupload-form--headline{
    position: absolute;
    width: 100%;
    top: 50px;
    z-index: 5;
}
@media (min-width: 992px){
    .vr-bonupload-form{
        margin-top: 0px;
    }
    .vr-bonupload-form--headline{
        top: 25px;
    }
}
.vr-bonupload-bigtext{
    font-size: 20px;
    line-height: 24px;
    color: #264979;
}
.vr-bonupload-gutter{
    padding-top: 75px;
    cursor: pointer;
    position: relative;
}
.vr-bonupload-gutter p{
    color: #264979;
    text-align: center;
}
@media (min-width: 992px){
    .vr-bonupload-gutter{
        padding-top: 0px;
        margin-top: 135px;
        margin-bottom: 245px;
        padding: 20px 32px;
        height: 500px;
    }
    .vr-bonupload-gutter p{
        color: #264979;
        text-align: left;
    }
}
.vr-bonupload-plus{
    width: 58px;
    height: 58px;
    border-radius: 50%;
}
p.vr-bonupload-uploadtext{
    color: #fff;
    text-decoration: underline;
    font-size: 30px;
    line-height: 36px;
    margin-bottom: 0px;

    color: #E8BC0A;
    font-size: 30px;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
}
p.vr-bonupload-uploadtext_sm{
    color: #fff;
    font-size: 16px;
    line-height: 19px;

    color: #0A4275;
    font-size: 16px;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
}
p.vr-bonupload-smalltext{
    font-size: 8px;
    line-height: 9px; 
    margin-top: 11px;
}
.vr-bonupload-formtext{
    padding-top: 50px;
}
.vr-upload-btn{
    text-align: center;

    border: 1px dashed #B7B7B7;
    border-radius: 32px;
    padding: 30px;
}
@media (min-width: 992px){
    .vr-bonupload-formtext{
        padding-top: 135px;
    }
    .vr-upload-btn{
        text-align: left;
        margin-top: 150px;
    }
}
.vr-va-t{
    vertical-align: top;
}
.vr-pl-15{
    padding-left: 15px;
}
.vr-mt-25{
    margin-top: 25px;
}
.vr-mt-75{
    margin-top: 75px;
}
.vr-d-none{
    display: none;
}
.vr-bonupload-thankyou,
.vr-bonupload-error,
.vr-bonupload-load{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 2;
    border-radius: 30px;
}
.vr-bonupload-load{
    opacity: 0.5;
}
.vr-upload-error {
    display: none;
    color: red;
}
.vr-bonupload-success{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 30px;
    top: 0;
    left: 0;
    padding-top: 95px; 
    display: none;
}
.vr-bonupload-success .vr-bonupload-plus{
    border-radius: 0;
}
@media (min-width: 992px){
    .vr-bonupload-success{
        padding-top: 175px;
    }
}
.vr-bonupload-thankyoutext{
    font-size: 27px;
    line-height: 32px;
    color: #fff;
    padding-top: 150px;

    color: #214071;
    text-align: center;
    font-family: "Ocean Sans Std";
    font-size: 30px;
    font-style: italic;
    font-weight: 700;
    line-height: 30px; /* 100% */
}
.vr-wirtsmadl-button a{
    margin-top: 57px;
}
.vr-wirtsmadl-button--blue a,
.vr-wirtsmadl-button--blue input,
.vr-wirtsmadl-button--blue button {
    background-color: #4677A6;
    outline: none;
    border: none; 
    color: #fff;
    padding: 15px 35px;
}
.vr-bonupload-input{
    border: 1px solid #fff;
    width: 100%;
    margin-bottom: 20px;
    color: #264979;
    font-size: 16px;
    background-color: transparent;
    padding: 15px 7px;
    border-radius: 10px;
    border: 1px solid #DCDCDC;
}
.vr-checkbox-container {
    display: flex;
    align-items: center;
}
.vr-checkbox-label {
    margin-left: 8px;
    padding-top: 5px;
    color: #214071;
}
.vr-checkbox-label a{
    color: #214071;
    font-weight: 900;
    text-decoration: underline;
}
input[type="checkbox"] {
    appearance: none;
    background-color: transparent;
    display: inline-block;
    cursor: pointer;
    position: relative;
    border: 1px solid #C7C7C7;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}
input[type="checkbox"]:checked {
    background-color: #214071;
}
input[type="checkbox"]:checked:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.vr-bonupload-input::placeholder {
    color: #214071;
    opacity: 1; /* Firefox benötigt einen Wert für die Opazität */
}
.vr-bonupload-files{
    position: relative;
}
.vr-bonupload-files-new{
    position: absolute;
    top: 175px;
    left: 0;
    pointer-events: none;
    opacity: 0;
}
/* Stil für den Spinner-Container */
.spinner-container {
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Stil für den Spinner */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.3);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}

/* Animationsstil */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*2025*/
.vr-bon25-winouter{
    display: flex;
    justify-content: center;
    margin-top: -82px;
    z-index: 3;
    position: relative;
}
.vr-bon25-outer{
    display: flex;
    justify-content: center;
}
.vr-bon25-header{
    position: relative;
    overflow: hidden;
    height: 415px;
    width: 100%;
    background-position: center center;
    background-size: cover;
    /*
    background-image: url(../img/2025/bg-image.jpg);
    */
    padding-top: 35px;
    position: relative;
}


.vr-bon25-gwbg1{
    display: none;
}
.vr-bon25-gwbg2{
    display: block;
}

.vr-bon25-content{
    padding: 15px 20px;
    text-align: center;
}
.vr-bon25-gewinn-title{
    color: #E6C922;
    text-align: center;
    font-family: "Ocean Sans Std";
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 88% */
}
.vr-bon25-gewinn-text{
    color: #FFF;
    font-family: "Ocean Sans Std";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.vr-bon25-kette,
.vr-bon25-wimpel,
.vr-bon25-packerl,
.vr-bon25-servietten,
.vr-bon25-grill,
.vr-bon25-kasten,
.vr-bon25-logo{
    position: absolute;
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
}
.vr-bon25-kette{
    top: -51px;
    left: 0;
    width: 277.408px;
    height: 155.433px;
    transform: rotate(1.158deg);
    background-image: url(../img/2025/lichterkette.png);
}
.vr-bon25-wimpel{
    top: -36px;
    right: -200px;
    width: 425.047px;
    height: 141.948px;
    transform: rotate(2.018deg);
    background-image: url(../img/2025/wimpel.png);
}
.vr-bon25-kasten{
    bottom: -50px;
    left: -30px;
    width: 233px;
    height: 278px;
    background-image: url(../img/2025/kasten.png);
}
.vr-bon25-grill{
    margin-top: 105px;
    width: 285px;
    height: 479px;
    margin-left: 90px;
    background-image: url(../img/2025/grill.png);
}
.vr-bon25-logo{
    margin-top: 105px;
    margin-left: 110px;
    width: 79px;
    height: 33px;
    background-image: url(../img/2025/weber.png);
}
.vr-bon25-kasten{
    bottom: -50px;
    left: -30px;
    width: 233px;
    height: 278px;
    background-image: url(../img/2025/kasten.png);
}
.vr-bon25-servietten{
    zoom: 0.75;
    margin-left: 28px;
    margin-top: 10px;

    width: 38px;
    height: 20px;
    background-image: url(../img/2025/servietten.png);
}
.vr-bon25-packerl{
    margin-left: 60px;
    zoom: 0.75;
    width: 52px;
    height: 66px;
    background-image: url(../img/2025/packerl.png);
}
.vr-inline-block{
    display: inline-block;
}
.vr-flex{
    display: flex;
    gap: 10px;
}
.vr-bon25-desktop{
    display: none;
}
.vr-bon25-timeframe{
    font-size: 12px;
}

@media (min-width: 992px){
    .vr-bon25-header{
        height: calc( ( 100vw / 992 ) * 415 );
    }
    .vr-bon25-gewinn-title{
        margin-top: calc( ( 100vw / 992 ) * 15 );
        margin-bottom: calc( ( 100vw / 992 ) * 20 );
        font-size: calc( ( 100vw / 992 ) * 22 );
    }

    html body strong.vr-bon25-timeframe{
        font-size: calc( ( 100vw / 992 ) * 12 );
    }
    .vr-bon25-gwbg1{
        display: block;
    }
    .vr-bon25-gwbg2{
        display: none;
    }
    .vr-bon25-kette{
        top: calc( ( ( 100vw / 992 ) * 80 ) * -1 );
        left: calc( ( 100vw / 992 ) * 30 );
        width: calc( ( 100vw / 992 ) * 416 );
        height: calc( ( 100vw / 992 ) * 233 );
        transform: rotate(1.158deg);
    }
    .vr-bon25-wimpel{
        top: calc( ( ( 100vw / 992 ) * 10 ) * -1 );
        right: calc( ( ( 100vw / 992 ) * 190 ) * -1 );
        width: calc( ( 100vw / 992 ) * 692 );
        height: calc( ( 100vw / 992 ) * 231 );
        transform: rotate(2.018deg);
    }
    .vr-bon25-kasten{
        left: unset;
        right: 0;
        bottom: calc( ( ( 100vw / 992 ) * 50 ) * -1 );
        width: calc( ( 100vw / 992 ) * 268 );
        height: calc( ( 100vw / 992 ) * 316 );
    }
    .vr-bon25-grill{
        width: calc( ( 100vw / 992 ) * 285 );
        height: calc( ( 100vw / 992 ) * 479 );
        margin-top: calc( ( 100vw / 992 ) * 102.5 );
        margin-left: -23%;
    }
    .vr-bon25-logo{
        width: calc( ( 100vw / 992 ) * 79 );
        height: calc( ( 100vw / 992 ) * 33 );
        margin-left: -23%;
        margin-top: calc( ( 100vw / 992 ) * 115 );
    }
    .vr-bon25-packerl{
        width: calc( ( 100vw / 992 ) * 52 );
        height: calc( ( 100vw / 992 ) * 66 );
        margin-left: calc( ( 100vw / 992 ) * 85 );
        margin-top: calc( ( 100vw / 992 ) * 10 );
        zoom: 1;
    }
    .vr-bon25-servietten{
        width: calc( ( 100vw / 992 ) * 38 );
        height: calc( ( 100vw / 992 ) * 20 );
        margin-left: calc( ( 100vw / 992 ) * 50 );
        margin-top: calc( ( 100vw / 992 ) * 17 );
        zoom: 1;
    }
    .vr-bon25-winouter{
        display: none;
        margin-top: calc( ( ( 100vw / 992 ) * 82 ) * -1 );
    }
    .vr-bon25-desktop{
        display: inline-block;
        margin-top: calc( ( 100vw / 992 ) * 60 );
        margin-left: 10px;
    }
    .vr-bon25-gewinn-text{
        font-size: calc( ( 100vw / 992 ) * 12 );
        line-height: calc( ( 100vw / 992 ) * 22 );
    }

    .vr-bon25-gewinn-text strong{
        font-weight: 700;
        font-size: calc( ( 100vw / 992 ) * 14 );
    }
    .vr-bon25-gewinn svg{
        height: calc((100vw / 992) * 262);
        width: calc((100vw / 992) * 235);
        zoom: 1.1;

    }
    .vr-bon25-desktop .vr-bon25-content{
        text-align: left;
    }
}

.vr-bon25-header::before {
  content: "";
  position: absolute; inset: 0;
  background: url(../img/2025/bg-image.jpg) center/cover no-repeat;
  /*filter: blur(1px);*/
  transform: scale(1.05);      /* hide blur edges */
  z-index: -1;                 /* sit behind the text */
}

/* Cloudflare Turnstile (Bot-Schutz) + Inline-Fehlermeldung des AJAX-Submits */
.vr-bonupload-turnstile {
    margin-top: 30px;
    min-height: 65px;
}
.vr-bonupload-formerror {
    display: none;
    margin-top: 15px;
    color: red;
    font-weight: 600;
}

/* ==========================================================================
   Bon-Runde 2026 „10 Jahre Wirts Madl" (REWE): Header, Countdown, Abschluss
   Szene: Key Visual ohne Text als Hintergrund (img/2026/hero*.jpg), Texte als HTML.
   ========================================================================== */
.vr-bon26-header {
    position: relative;
    width: 100%;
}
.vr-bon26-scene {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 1255;
    background: url(../img/2026/hero-mobile.jpg) center top / cover no-repeat;
    overflow: hidden;
}
.vr-bon26-fg {
    display: none;
}
.vr-bon26-text {
    position: absolute;
    top: 6%;
    left: 0;
    right: 0;
    padding: 0 12px;
    text-align: center;
    z-index: 2;
}
.vr-bon26-headline {
    margin-bottom: 0;
}
.vr-bon26-headline .vr-headlines__block.--content {
    font-size: 16px;
    line-height: 23px;
    height: 36px;
}
/* Text-Rotation an die jeweilige Box angleichen: die Komponente dreht den Text global -5 Grad,
   die Boxen aber -6/-3/-2 Grad. Bei langen Zeilen kippt der Text sonst sichtbar aus der Box. */
.vr-bon26-headline .vr-headlines__outer--1 .vr-headlines__line {
    transform: rotate(-6deg);
}
.vr-bon26-headline .vr-headlines__outer--2 .vr-headlines__line {
    transform: rotate(-3deg);
}
.vr-bon26-headline .vr-headlines__outer--3 .vr-headlines__line {
    transform: rotate(-2deg);
}
/* Claim „WIRTS MADL. Wer sonst." als dritte, kleinere Headline-Zeile */
.vr-bon26-headline .vr-bon26-claim.vr-headlines__block.--content {
    font-size: 13px;
    line-height: 18px;
    height: 30px;
    margin-top: 2px;
}
@media (min-width: 420px) {
    .vr-bon26-headline .vr-headlines__block.--content {
        font-size: 19px;
        line-height: 27px;
        height: 41px;
    }
}
.vr-bon26-ai {
    position: absolute;
    right: 10px;
    bottom: 6px;
    margin: 0;
    z-index: 2;
    font-size: 11px;
    line-height: 1.2;
    color: #fff;
    opacity: 0.85;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.vr-bon26-box {
    position: relative;
    z-index: 3;
    background: #3C5C88;
    color: #fff;
    border-radius: 22px;
    padding: 24px 26px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.vr-bon26-box--mobile {
    margin: -34px 16px 0;
    transform: rotate(-1.2deg);
}
.vr-bon26-box--desktop {
    display: none;
}
.vr-bon26-box__title {
    margin: 0 0 12px;
    color: #E6C922;
    font-family: "Ocean Sans Std";
    font-weight: 700;
    font-size: 27px;
    line-height: 1.1;
}
.vr-bon26-box__text {
    margin: 0 0 10px;
    font-family: "Ocean Sans Std";
    font-size: 15px;
    line-height: 23px;
}
.vr-bon26-box__period {
    margin: 0 0 6px;
    font-family: "Ocean Sans Std";
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
}
.vr-bon26-box__note {
    margin: 0;
    font-family: "Ocean Sans Std";
    font-size: 12px;
    line-height: 16px;
    opacity: 0.85;
}

/* Countdown / Abschluss */
.vr-bon26-wrap {
    max-width: 720px;
    margin: 40px auto 60px;
    padding: 0 16px;
    text-align: center;
}
.vr-bon26-head {
    margin: 0 0 22px;
    color: #214071;
    font-family: "Ocean Sans Std";
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
}
.vr-bon26-timer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.vr-bon26-timerbox {
    min-width: 76px;
    padding: 14px 8px;
    background: #4777a6;
    border-radius: 12px;
}
.vr-bon26-num {
    color: #E6C922;
    font-family: "Ocean Sans Std";
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
}
.vr-bon26-lab {
    margin-top: 6px;
    color: #E6C922;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.vr-bon26-status {
    margin: 22px 0 0;
    color: #214071;
    font-family: "Ocean Sans Std";
    font-size: 16px;
    line-height: 24px;
}
.vr-mt-25 {
    margin-top: 25px;
}

@media (min-width: 992px) {
    .vr-bon26-scene {
        aspect-ratio: auto;
        height: clamp(560px, calc((100vw / 1440) * 720), 880px);
        background-image: url(../img/2026/hero-bg-md.jpg);
        background-position: 22% 25%;
    }
    /* Freigestellte Gruppe: Hoehe folgt dem Header, nicht der Viewport-Breite */
    .vr-bon26-fg {
        display: block;
        position: absolute;
        left: 2%;
        bottom: -1.5%;
        height: 84%;
        width: auto;
        z-index: 1;
        pointer-events: none;
    }
    .vr-bon26-fg img {
        display: block;
        height: 100%;
        width: auto;
    }
    .vr-bon26-text {
        top: 7%;
        left: auto;
        right: 4%;
        width: 47%;
        padding: 0;
    }
    .vr-bon26-headline .vr-headlines__block.--content {
        font-size: calc((100vw / 1440) * 34);
        line-height: calc((100vw / 1440) * 46);
        height: calc((100vw / 1440) * 58);
    }
    .vr-bon26-headline .vr-bon26-claim.vr-headlines__block.--content {
        font-size: calc((100vw / 1440) * 19);
        line-height: calc((100vw / 1440) * 26);
        height: calc((100vw / 1440) * 36);
        margin-top: 4px;
    }
    .vr-bon26-box--mobile {
        display: none;
    }
    .vr-bon26-box--desktop {
        display: inline-block;
        max-width: 520px;
        margin-top: calc((100vw / 1440) * 28);
        padding: calc((100vw / 1440) * 28) calc((100vw / 1440) * 34) calc((100vw / 1440) * 22);
        text-align: left;
        transform: rotate(-1.5deg);
    }
    .vr-bon26-box__title {
        font-size: calc((100vw / 1440) * 32);
    }
    .vr-bon26-box__text {
        font-size: calc((100vw / 1440) * 16);
        line-height: calc((100vw / 1440) * 25);
    }
    .vr-bon26-ai {
        right: 16px;
        bottom: 10px;
        font-size: 12px;
    }
    .vr-bon26-head {
        font-size: 32px;
    }
    .vr-bon26-timerbox {
        min-width: 110px;
        padding: 18px 12px;
    }
    .vr-bon26-num {
        font-size: 40px;
    }
}
@media (min-width: 1400px) {
    .vr-bon26-scene {
        background-image: url(../img/2026/hero-bg.jpg);
    }
}
@media (min-width: 1600px) {
    .vr-bon26-headline .vr-headlines__block.--content {
        font-size: 38px;
        line-height: 51px;
        height: 64px;
    }
    .vr-bon26-headline .vr-bon26-claim.vr-headlines__block.--content {
        font-size: 21px;
        line-height: 29px;
        height: 40px;
    }
    .vr-bon26-box--desktop {
        margin-top: 31px;
        padding: 31px 38px 24px;
    }
    .vr-bon26-box__title {
        font-size: 36px;
    }
    .vr-bon26-box__text {
        font-size: 18px;
        line-height: 28px;
    }
}

/* ==========================================================================
   Radler-Modus (Cookie wirtsmadl_mode=radler → Klasse .radler-mode auf main):
   alle Blautöne der Bon-Seite → Radler-Grün, analog scss/partials/_radler-mode.scss.
   Headline-Boxen und .vr-wirtsmadl-button deckt das globale SCSS bereits ab.
   ========================================================================== */
.radler-mode .vr-bonupload-text,
.radler-mode .vr-bonupload-bigtext,
.radler-mode .vr-bonupload-gutter p,
.radler-mode .vr-bonupload-thankyoutext,
.radler-mode .vr-bonupload-input,
.radler-mode .vr-checkbox-label,
.radler-mode .vr-checkbox-label a,
.radler-mode .vr-bon26-head,
.radler-mode .vr-bon26-status {
    color: #016735;
}
.radler-mode .vr-bonupload-input::placeholder {
    color: #016735;
}
.radler-mode input[type="checkbox"] {
    border-color: #016735;
}
.radler-mode input[type="checkbox"]:checked {
    background-color: #016735;
}
/* f:form.submit rendert ein <input>, das globale SCSS deckt nur a/button ab */
.radler-mode .vr-wirtsmadl-button--blue button,
.radler-mode .vr-wirtsmadl-button--blue input,
.radler-mode .vr-wirtsmadl-button--blue a {
    background-color: #016735;
}
.radler-mode .vr-wirtsmadl-button--blue button:hover,
.radler-mode .vr-wirtsmadl-button--blue input:hover,
.radler-mode .vr-wirtsmadl-button--blue a:hover {
    background-color: #01552c;
}
/* „Datei auswählen" bleibt der gelbe Akzent wie im Blau-Modus */
.radler-mode .vr-bonupload-gutter p.vr-bonupload-uploadtext {
    color: #E6C922;
}
.radler-mode .vr-bon26-box,
.radler-mode .vr-bon26-timerbox {
    background: #016735;
}
/* Plus-Icon der Dropzone ist ein JPG mit blauem Plus: Farbton per Filter ins Grün drehen */
.radler-mode .vr-upload-btn .vr-bonupload-plus {
    filter: hue-rotate(-62deg) saturate(1.15);
}

/* ------------------------------------------------------------------
   Verlaengerungs-Stoerer der Bon-Runde 2026
   ------------------------------------------------------------------
   Nachbau der Agentur-Grafik (gelbe Kreisflaeche, roter Ring innen)
   als CSS statt als Bild: Der Stoerer nennt das Ende der Upload-Frist,
   und das aendert sich bei einer weiteren Verlaengerung. Als Grafik
   muesste dafuer jedes Mal eine neue Datei gesetzt werden; als Markup
   liest er settings.campaign.uploadUntil mit.

   Die Groesse haengt an --stoerer-groesse, die Schrift rechnet in em
   davon ab. Ein geaenderter Durchmesser skaliert damit den ganzen
   Stoerer, statt vier Pixelwerte einzeln nachzuziehen.

   Positioniert wird nicht hier, sondern je Einsatzort ueber eine
   eigene Klasse weiter unten — die Kreis-Regeln stehen nur einmal. */
.vr-bon-stoerer {
    --stoerer-groesse: 200px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--stoerer-groesse);
    height: var(--stoerer-groesse);
    padding: calc(var(--stoerer-groesse) / 9);
    border-radius: 50%;
    background-color: #E6C922;
    color: #214071;
    font-size: calc(var(--stoerer-groesse) / 16);
    line-height: 1.3;
    text-align: center;
}
/* Die Agentur-Vorlage hatte einen roten Ring innerhalb der gelben Flaeche.
   Auf Wunsch (21.09.2026) faellt er weg — die Flaeche bleibt einfarbig gelb. */
/* Im Slider ist der Stoerer ein Link zur Bon-Seite, im Bon-Header nur
   Text. Beide sollen gleich aussehen — also Linkfarbe und Unterstrich
   hier abraeumen. */
a.vr-bon-stoerer,
a.vr-bon-stoerer:hover,
a.vr-bon-stoerer:focus {
    color: #214071;
    text-decoration: none;
}
/* Aufrecht, nicht die SemiExtended-Schnitte: die liegen im Projekt nur
   kursiv vor, die Vorlage der Agentur steht gerade. 'Ocean Sans Std'
   bringt Light (300) und Bold aufrecht mit.
   display:block, weil die Textbloecke im Slider <span> sind (inline)
   und im Bon-Header <p> — ohne das greifen die margins nur an einer
   der beiden Stellen. */
.vr-bon-stoerer__head,
.vr-bon-stoerer__sub {
    display: block;
    font-family: 'Ocean Sans Std', Helvetica, Arial, sans-serif;
    font-style: normal;
}
.vr-bon-stoerer__head {
    margin: 0;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 0.01em;
}
.vr-bon-stoerer__sub {
    margin: 0.9em 0 0;
    font-size: 1em;
    font-weight: 300;
}

/* Einsatzort 1: Header der Bon-Seite, rechts oben ueber dem Key Visual.
   Ab 992px steht der Header zweiteilig (Landschaft als Hintergrund,
   Motiv als img) — der Stoerer liegt mit z-index darueber. */
.vr-bon26-stoerer {
    display: none;
}
/* Unten verankert, nicht oben: Oben liegen Headline (bis ~y283) und die
   blaue Box (bis ~y517) — dort verdeckte der Stoerer beides. Unterhalb der
   Box ist die Landschaft frei. Mit bottom statt top haelt er diesen Abstand
   auch, wenn die Szene bei anderer Viewport-Breite hoeher oder flacher wird;
   mit top wandert er dagegen in die Box hinein. */
@media (min-width: 992px) {
    .vr-bon26-stoerer {
        /* 176px im schmalen Desktop-Bereich: Zwischen Boxunterkante und
           KI-Hinweis bleiben hier nur rund 200px. Mit 200px lag der Kreis
           2px unter der Box und 4px ueber dem Hinweis — formal kollisionsfrei,
           praktisch aber ohne Reserve, sobald der Boxtext eine Zeile waechst. */
        --stoerer-groesse: 176px;
        display: flex;
        position: absolute;
        z-index: 6;
        bottom: 6%;
        right: 4%;
    }
}
/* Nur massvoll groesser: Zwischen Unterkante der blauen Box und dem
   KI-Hinweis unten bleiben rund 250px. Ein groesserer Kreis stoesst an
   eines von beidem an. */
@media (min-width: 1400px) {
    .vr-bon26-stoerer {
        --stoerer-groesse: 216px;
    }
}
/* Unter 992px laeuft der Header auf das Hochformat-Motiv um; dort ist im
   Bild kein Platz, ohne die Headline zu verdecken. Der Stoerer rutscht
   deshalb in den Fluss unter den Header statt ins Bild. */
@media (max-width: 991px) {
    .vr-bon26-stoerer-mobil {
        --stoerer-groesse: 180px;
        display: flex;
        margin: 22px auto 0;
    }
}
@media (min-width: 992px) {
    .vr-bon26-stoerer-mobil {
        display: none;
    }
}

/* Einsatzort 2: Hero-Slider der Startseite, oben rechts.
   Unterhalb der Navigation und oberhalb der gruenen Radler-Ticker-
   Baender; der gelbe Button „Zum Bon-Upload" sitzt unten und wird
   nicht verdeckt. z-index 5 wie der Button — ueber der Zitrone (4). */
.vr-slider-stoerer {
    --stoerer-groesse: 132px;
    position: absolute;
    z-index: 5;
    top: 18px;
    right: 15px;
}
@media (min-width: 992px) {
    .vr-slider-stoerer {
        --stoerer-groesse: 196px;
        top: 96px;
        right: 55px;
    }
}
@media (min-width: 1600px) {
    .vr-slider-stoerer {
        --stoerer-groesse: 224px;
    }
}