.mobile-off {display: block;}
  .mobile-on {display:none;}
.space {
  margin-top:5%; 
  margin-bottom: 5%;}

.videobackground {
  filter: brightness(40%) sepia(1) hue-rotate(170deg) saturate(3);}

.custom-h3, .custom-h2{
font-weight: normal;
  line-height: 36px;
  font-size: 30px;
  margin-bottom:20px;}


p {
  hyphens: auto;}

strong {font-family:montserratsemibold;}



/* POSITION 1 – der weg zum ...  */
#position-1 {
  width:90%}

#position-1 h2 {
  font-weight: normal;
  letter-spacing: -4px;
  line-height: 70px;
  font-size: 60px;
  font-family: quicksandbold;
  margin-bottom: 4%;}

.space-cta {
  margin-left:60px;}

/* POSITION 1 – der weg zum ... END */

/* MENU */
section#row1.tck-row {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%; /* Set the width to cover the entire viewport */
    background-color: transparent; /* Set the initial background color */
    transition: background-color 0.3s ease; /* Add a smooth transition effect */}
  
  .colored-background {
    background-color: rgba(5,48,87,0.90) !important; /* Set the desired background color */}

  .tck-logo-img {
    max-width: 100%; /* Set the initial max width for the image */
    transition: max-width 0.3s ease; /* Add a smooth transition effect */}

  .smaller-logo {
    max-width: 50%; /* Set the smaller max width for the image */}

/* MENU */

/* HEADER */

#header-txt h1, #header-txt-1u h1 {color:#fff;}

#header-txt > .inner, #header-txt-1u  > .inner{
  max-width: 60%;
  margin: 0 auto;}

.header-txt-copy {
  max-width:900px;
  margin: 0 auto;}

/* Feste Breite des Containers */
.image-container {
  width: 100px; /* Feste Breite des Containers */
  height: 100px; /* Feste Höhe des Containers */
  display: flex;
  justify-content: center;
  align-items: center;
  animation: pulse 1.5s infinite;
  margin: 0 auto;}

.pulse-image {
  max-width: 100%;
  max-height: 100%;}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.arrow-video {
  margin-top: -40px;
  margin-left: 20px;}

/* HEADER END */


/* geteilte Überschrift */

.highlight {
  font-family: quicksandbold;}

 /* Info "Kasterln" */
.container-info {
  display: flex;
  align-items: center;
  width: 80%;
  margin: 0 auto;}

.container-info-1 {
  display: flex;
  align-items: center;
  margin: 0 auto;
 float:right;}
  
.arrow-info img {
  max-width: 79px; 
  height: auto;
  margin-right: 20px;}
  
.txt-info {
  color: #ffffff;
  line-height: 1.2; 
  font-size: 28px; 
  font-family: caveatregular;}

 /* Info "Kasterln" - blue – Aufzählung */

.arrow-info-blue img {
  max-width: 79px;
  height: auto;
  margin-left: 40px;
  margin-top: 200px;}

.arrow-info-blue-2 img {
  max-width: 79px;
  height: auto;
  margin-left: 40px;}

.txt-info-blue {
  color: #053057;
  line-height: 1.2; 
  font-size: 28px; 
  font-family: caveatregular;}

/* große rote Pfeile - Beispiel  */

.arrow-container {
  display: flex;
  margin: 0 auto;}

/* Styling for the arrow */
.arrow-red, .arrow-red-sample {
  background: url("../images/arrow-red.svg");
  background-size: contain;
  height: 60px;
  width: 60px;
  margin-right: 10px;
  background-repeat: no-repeat;
  margin-top:-14px;}

.arrow-green-sample {
  background: url("../images/arrow-green.svg");
  background-size: contain;
  height: 40px;
  width: 40px;
  margin-right: 10px;
  background-repeat: no-repeat;
  margin-left:60px;}

.arrow-bonus-sample {
  background: url("../images/signet-weiss-rot-1.svg");
  background-size: contain;
  height: 40px;
  width: 40px;
  margin-right: 10px;
  background-repeat: no-repeat;
  margin-left:60px;}

/* Adjust position for the arrow */
.arrow-red::before, .arrow-red-sample::before, .arrow-green-sample::before, .arrow-bonus-sample::before {
  content: '';
  display: block;
  float: left;}

.arrow-red-txt{
  width:90%;
  margin-bottom:7%}

.arrow-red-sample-txt {
  width: 90%;
  font-size: 34px;
  line-height: 40px;}

.arrow-green-sample-txt, .arrow-bonus-sample-txt{
  width: 90%;}

/* div. Sektionen  */
#position-22 > .inner, #position-23 > .inner{
  min-height: 380px;}

#position-26 {
  width: 75%;
  float: right;}

#position-27 {
  width: 75%;
  float: left;}

.sub-head {
  line-height: 32px;
  font-size: 22px;
  font-family: montserratsemibold;}


section#row4 {
  width:80%;
  margin: 0 auto;}


section#row13, section#row14, #position-21 {
  width:70%;
  margin: 10px auto;}

.small-txt {
  font-size:14px;
  line-height:24px;}



/* Kontakt */

.form-check-input[type="checkbox"] {
  border-radius: 0;
  padding: 8px !important;
  margin-right: 10px;}

/*Button-Cookie*/
.cc-custom-revoke {
  z-index: 100;
  position: fixed;
  display: inline-block;
  bottom: 10px;
  left: 10px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  font-weight: normal;}


/* Animation – verbinden was zusammen ... */
.rotating-image {
  width: 225px;
  height: 217px;
  animation: rotate 8s linear infinite; /* Hier wird die Animation angewendet */
}

.rotating-image-1 {
  width: 90px;
  height: 86px;
  animation: rotate 8s linear infinite; /* Hier wird die Animation angewendet */
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);}
}


/* 1792x828px at 326ppi XR, XS*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2)
    and (orientation : landscape) {

.smaller-logo {
    max-width: 100% !important;}

#mainmenu {
  margin-top: -20px;}

#header-txt > .inner{
  max-width: 100% !important;}

#header-txt > .inner {
  line-height: 18px;
  font-size: 12px;}

h1, div.componentheading, #position-1 h2, #position-4 .tck-module-title, #position-21 .tck-module h3,  #position-25 .tck-module h3, #position-30 .tck-module h3  {
  line-height: 45px !important;
  font-size: 40px !important;
  letter-spacing: -3px !important;}

#row2 > .inner {
  min-height: 100px !important;}

.image-container {
  width: 70px !important;
  height: 70px !important;}

.arrow-video {
  margin-top: -70px !important;
  margin-right: 100px;
  float: right;}

#position-1 > .inner {
  line-height: 28px;
  font-size: 20px;}

#wrapper5 {
  background: #053057 url('../images/signet-weiss-rot-1.svg') right -10px bottom -30px no-repeat scroll;
  background-size: 150px;
  padding-bottom:20%;}

#position-8 {
  margin-top: 5%;}

position-9{
  margin: 0 auto !important;}

#position-17, #position-20 {
  margin-bottom: 5%;}

#position-21 .tck-module-text{
  line-height: 28px !important;
  font-size: 20px !important;}

#position-22 > .inner, #position-23 > .inner{
  min-height: 0px !important;
  float:none;
  margin-right: 4%;
  margin-left: 4%;
  margin-top: 5%;}

#position-24 > .inner {
  margin-right: 4%;
  margin-left: 4%;
  margin-top: 3%;}

#position-26, #position-27 {
  width: 100% !important;
  float: none;}

#position-26 > .inner, #position-27 > .inner  {
  margin-right: 2%;
  margin-left: 2%;
  margin-top: 4%;}
      
#wrapper1a {
  min-height: 60px;}
      
#position-2 > .inner,#position-5 > .inner, #position-7 > .inner, #position-10 > .inner, #position-11 > .inner, #position-14 > .inner, #position-15 > .inner, #position-18 > .inner, #position-19 > .inner, #position-22 > .inner, #position-23 > .inner, #position-24 > .inner, #position-25 > .inner, #position-26 > .inner, #position-27 > .inner, #position-28 > .inner
{ line-height: 160%; font-size:120% !important}
       #position-24,  #position-25, #wrapper {font-size: 60% !important; line-height:160%;}    
     #wrapper {font-size: 70% !important; line-height:160%;}  
      body {font-size: 16px; line-height:160%;}

}