@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bloc';
  font-style: normal;
  font-weight: 300;
  src: url('/promo-design/2026-q4/fonts/Bloc.otf') format('otf'),
       url('/promo-design/2026-q4/fonts/Bloc.ttf') format('truetype'); 
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'BlocBold';
  font-style: normal;
  font-weight: 300;
  src: url('/promo-design/2026-q4/fonts/Bloc-Heavy.otf') format('otf'),
       url('/promo-design/2026-q4/fonts/Bloc-Heavy.ttf') format('truetype'); 
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'BlocCondensed';
  font-style: normal;
  font-weight: 300;
  src: url('/promo-design/2026-q4/fonts/Bloc-Heavy.otf') format('otf'),
       url('/promo-design/2026-q4/fonts/Bloc-Heavy.ttf') format('truetype'); 
}

:root {
  --mms-hintergrund: #006933;
  --mms-akzent: #fafafa;
  --mms-rot: #e40327;
  --mms-akzent-text: #fff;
  --mms-radius: 1rem;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--mms-hintergrund);
}

h1{
  font-family: 'Bloc';
  color:white;
  font-size:4rem;
  text-transform: uppercase;
}

h2{
  font-family: 'Bloc';
  color:white;
  text-transform: uppercase;
}

h3{
  font-family: 'Bloc';
  color:white;
  text-transform: uppercase;
  font-size:1.3rem;
}

label{
  color:white;
}

@media only screen and (max-width: 992px) {
	h1{
    font-size:2.5rem;
  }
}
@media only screen and (max-width: 500px) {
	h1{
    font-size:1.8rem;
  }
  h2{
    font-size:1.3rem;
  }
}

#main-container{
  background-image: url(/promo-design/2026-q4/pics/main-bg.jpg);
  background-size: 100% auto;
  background-repeat: repeat-y;
}

.navbar {
  background-color: #e40327 !important;
  margin: 0;
  position: relative;
  z-index:100;
  border-bottom:1px solid black;
}

.navbar .nav-link {
  color: #fff;
  font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--mms-akzent);
}

.navbar-toggler{
  background-color:white;
  box-shadow: none;
}
.navbar-toggler:focus{
  box-shadow: none;
}

.flag-icon{
  max-width:25px;
}
.navbar-expand-md .navbar-nav .nav-link.icon-link{
  padding-left:2px;
  padding-right:2px;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
  color:white;
}

.icon-nav{
  padding-left:20px;
}
@media only screen and (max-width: 768px) {
	.icon-nav{
    padding-left:0px;
  }
}

.kugel-container{
  position: relative;
}

.main-header{
  position: absolute;
  top:0%;
  left:0px;
  width:100%;
  text-align: center;
}

.kugeln img{
  max-width:10%;
  display:inline-block;
  vertical-align: top;
  margin-left:1.6%;
  margin-right:1.6%;
}

.keyvisual{
  position:relative;
  top:0px;
  max-width:55%;
  display: block;
  margin:auto;
}

.tanne-links-top{
  left:0px;
  position:absolute;
  max-width:30%;
}
.tanne-rechts-top{
  right:0px;
  position:absolute;
  max-width:30%;
}

.row-red{
  background-color:#e40327;
  padding-top:30px;
  padding-bottom:30px;
  position:relative;
}

.row-red-no-padding{
  background-color:#e40327;
  position:relative;
}

.margin-top-20{
  margin-top:-20px;
}

.margin-top-40{
  margin-top:-40px;
}

@media only screen and (max-width: 768px) {
	.margin-top-40{
    margin-top:-20px;
  }
}

.margin-top-correct{
  margin-top:-1px;
}
.country-selection{
  position: relative;
  top:-10%;
}

.receipt{
  position: relative;
  top:-10%;
}

.address{
  position: relative;
  top:-10%;
}

.country-selection-container{
  margin-top:-20%;
}

.receipt-container{
  margin-top:-20%;
}

.countdown-wrapper{
  position: relative;
  margin-top:-1px;
}


.bubble{
  margin-left:20px;
  margin-right:20px;
}

.country-selection .tanne-links{
  left:0px;
  position:absolute;
  max-width:30%;
  z-index:10;
  top:48%;
}

.country-selection .tanne-rechts{
  right:0px;
  position:absolute;
  max-width:30%;
  z-index:10;
  top:48%;
}

.receipt .tanne-links{
  left:0px;
  position:absolute;
  max-width:30%;
  z-index:10;
  top:48%;
}

.receipt .tanne-rechts{
  right:0px;
  position:absolute;
  max-width:30%;
  z-index:10;
  top:48%;
}


.address .tanne-links{
  left:0px;
  position:absolute;
  max-width:30%;
  z-index:10;
  top:-15%;
}

.address .tanne-rechts{
  right:0px;
  position:absolute;
  max-width:30%;
  z-index:10;
  top:-15%;
}

.red-container-content{
  position:relative;
  z-index:20;
}

.winken-rechts{
  position:relative;
  max-width:25%;
  float:right;
  right:20px;
}

@media only screen and (max-width: 1400px) {
	.country-selection .tanne-links{
    max-width:28%;
    top:42%;
  }
  .country-selection .tanne-rechts{
    max-width:28%;
    top:42%;
  }

  .receipt .tanne-links{
    max-width:28%;
    top:42%;
  }
  .receipt .tanne-rechts{
    max-width:28%;
    top:42%;
  }


  .address .tanne-links{
    max-width:28%;
    top:-10%;
  }
  .address .tanne-rechts{
    max-width:28%;
    top:-10%;
  }
}

@media only screen and (max-width: 1200px) {
	.country-selection .tanne-links{
    max-width:25%;
    top:42%;
  }
  .country-selection .tanne-rechts{
    max-width:25%;
    top:42%;
  }

  .receipt .tanne-links{
    max-width:25%;
    top:42%;
  }
  .receipt .tanne-rechts{
    max-width:25%;
    top:42%;
  }


  .address .tanne-links{
    max-width:25%;
    top:-8%;
  }
  .address .tanne-rechts{
    max-width:25%;
    top:-8%;
  }
}

@media only screen and (max-width: 992px) {
	.red-container-content h1{
    font-size:2.5rem;
  }
  .bubble{
    max-width:75px;
    margin-left:10px;
    margin-right:10px;
    
  }
  
  .country-selection .tanne-links{
    max-width:28%;
    top:42%;
  }

  .country-selection .tanne-rechts{
    max-width:28%;
    top:42%;
  }

  .receipt .tanne-links{
    max-width:28%;
    top:42%;
  }

  .receipt .tanne-rechts{
    max-width:28%;
    top:42%;
  }


  .address .tanne-links{
    max-width:28%;
    top:-5%;
  }

  .address .tanne-rechts{
    max-width:28%;
    top:-5%;
  }

  .winken-rechts{
    max-width:30%;
    right:0px;
  }
  .country-selection-container {
      margin-top: -30%;
  }
}

@media only screen and (max-width: 768px) {
	.red-container-content h1{
    font-size:2rem;
  }
  .bubble{
    max-width:75px;
  }
  .country-selection .tanne-links{
    max-width:33%;
    top:40%;
  }
  .country-selection .tanne-rechts{
    max-width:33%;
    top:40%;
  }

  .receipt .tanne-links{
    max-width:33%;
    top:40%;
  }
  .receipt .tanne-rechts{
    max-width:33%;
    top:40%;
  }


  .address .tanne-links{
    max-width:33%;
    top:-4%;
  }
  .address .tanne-rechts{
    max-width:33%;
    top:-4%;
  }
  .winken-rechts{
    max-width:35%;
    right:0px;
  }
  .country-selection-container {
      margin-top: -30%;
  }
}

@media only screen and (max-width: 500px) {
	.red-container-content h1{
    font-size:1.8rem;
  }
  .bubble{
    max-width:50px;
  }
  .country-selection .tanne-links{
    max-width:33%;
    top:40%;
  }
  .country-selection .tanne-rechts{
    max-width:33%;
    top:40%;
  }

  .receipt .tanne-links{
    max-width:33%;
    top:40%;
  }
  .receipt .tanne-rechts{
    max-width:33%;
    top:40%;
  }

  .address .tanne-links{
    max-width:33%;
    top:-2%;
  }
  .address .tanne-rechts{
    max-width:33%;
    top:-2%;
  }
  .winken-rechts{
    max-width:35%;
    right:0px;
  }
  .country-selection-container {
      margin-top: -30%;
  }
  .row-red{
    padding-top:20px;
    padding-bottom:20px;
  }
}

.btn-receipt{
  background-color:#fdd16d;
  color:#006933;
}

.btn.btn-receipt:hover{
  background-color:#006933;
  color:#fdd16d;
}

.btn.btn-receipt:active{
  background-color:#fdd16d;
  color:#006933;
}

.btn-primary{
  background-color:#fdd16d;
  color:#006933;
  border:1px solid #fdd16d;
}

.btn.btn-primary:hover, .btn.btn-primary:active{
  background-color:#006933;
  color:#fdd16d;
  border:1px solid #006933;
  
}


.btn{
  text-transform:uppercase;
}

fieldset{
  text-align: left;
}
.green-headline{
  color:white;
}

.section{
  position: relative;
  padding: 80px 10% 40px 10%;
}

.section-transparent{
  z-index:200;
}

.section-red{
  position: relative;
  padding: 40px 10% 40px 10%;
}

.upload-container2, .upload-container3{
  margin-top:100px;
}

/* Datei-Auswahl-Button in Akzentfarbe (Magenta). */
input[type="file"]::file-selector-button {
  background-color: #fdd16d;
  color: #006933;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

/* Browserunabhängige französische Beschriftung des Datei-Uploads. */
.file-upload {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  color: #000;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
}

.file-upload input{
  opacity: 0; 
  position:absolute; 
  z-index:100;
}

.file-upload:focus-within {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.file-upload__button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: 0.5rem 1rem;
  color: #006933;
  background: #fdd16d;
  cursor: pointer;
}

.file-upload__name {
  min-width: 0;
  overflow: hidden;
  padding: 0.5rem 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bon-hint-ul li{
  list-style-image: url(/promo-design/2026-q4/pics/ul-star.png);
  margin-bottom:5px;
  color:white;
}
.bon-hint-ul li span{
  position:relative;
  top:-3px;
}


.logo-brand{
	cursor:pointer;
  width:70px;
  border:1px solid white;
  border-radius:10px;
}
.logo-checkbox{
	position:absolute;
	bottom:0px;
	left:0px;
  float:none !important;
  margin-left:0px !important;
}
.aktionsprodukte-container{
	position:relative;
	display:inline-block;
	margin-right:5px;
  margin-bottom:15px;
}

.points-row{
  margin-top:50px;
}

.missing-points{
  font-size:2rem;
}

.banking-details{
  position:relative;
  padding:0 20% 0 20%;
}

.address-container{
  position:relative;
}

.winken-bottom{
  position:absolute;
  left:0px;
  max-width:25%;
  bottom:0px;
}

.winken-bottom-mobile{
  max-width:55%;
  display:block;
  margin:auto;
}

.no-bottom{
  padding-bottom: 0px !important;
}

@media only screen and (max-width: 992px) {
  .winken-bottom{
    max-width:33%;
  }
}

@media only screen and (max-width: 768px) {
  .banking-details{
    position:relative;
    padding:0 5% 0 5%;
  }
  .preview-bon{
    max-width:70%;
    display:block;
    margin:auto;
  }

  .winken-bottom-mobile{
    margin-top:-70px;
  }
}

.padding-content{
  padding-left:20%;
  padding-right:20%;
}


.countdown{
  color:white;
  font-size:2rem;
  font-family: 'Bloc';
}

.countdown strong{
  font-size:3.5rem;
}

@media only screen and (max-width: 1200px) {
  .countdown{
    padding-left: 30%;
    padding-right: 30%;
    line-height: 140%;
  }
  .countdown strong{
    
  }
}

@media only screen and (max-width: 768px) {
  .countdown{
    
    padding-left: 10%;
    padding-right: 10%;
    line-height: 140%;
  }
  .countdown strong{
    
  }
  .padding-content{
    padding-left:5%;
    padding-right:5%;
  }
}

@media only screen and (max-width: 500px) {
  .countdown{
    font-size:1.5rem;
    padding-left: 10%;
    padding-right: 10%;
    line-height: 140%;
  }
  .countdown strong{
    font-size:2rem;
  }
  .winken-bottom-mobile{
    margin-top:-50px;
  }
}