/* CSS für TCS Cloudpage mit SmartCapture-Form Nemuk 05-02-25 */

*, *::before, *::after {
  box-sizing: border-box;
}
@font-face {
  font-family: 'MuseoSans';
  font-style: normal;
  font-weight: 300;
  src: url(https://storage.googleapis.com/static-imgs/TCSTCS/Fonts/MuseoSans-300.woff2) format('woff2');
}
@font-face {
  font-family: 'MuseoSans';
  font-style: normal;
  font-weight: 700;
  src: url(https://storage.googleapis.com/static-imgs/TCSTCS/Fonts/MuseoSans_700.woff2) format('woff2');
}
@font-face {
  font-family: 'MuseoSlab';
  font-style: normal;
  font-weight: 300;
  src: url(https://storage.googleapis.com/static-imgs/TCSCOM/Fonts/Museo_Slab_300.woff2) format('woff2');
}
@font-face {
  font-family: 'MuseoSlab';
  font-style: normal;
  font-weight: 700;
  src: url(https://storage.googleapis.com/static-imgs/TCSCOM/Fonts/Museo_Slab_700.woff2) format('woff2');
}
/* Standardtext: MuseoSans 300 */
html {
  font-family: 'MuseoSans', Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: #000000;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
input, input[type=button], input[type=submit] {
   font-size: 18px;
}
body {
background-color: #ffeb00;
margin: 0;
padding: 0;
}
h1 {
  font-family: 'MuseoSlab', serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  padding: 0px 0px 20px 0px;
}
.main {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
}
.main.eti {
background-image: url("https://image.contact.tcs.ch/lib/fe2c11737364047e7c1677/m/1/b8cf1247-c2b8-48be-8148-ccfa6835b0c4.jpg");
}
.logo {
left: 150px;
position: absolute;
z-index: 1;
}   
.message {
  max-width: 830px;
  width: 100%;
  position: absolute;
  top: 22vh;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px 0 20px;
  background: #ffeb00;
  border-radius: 11px;
  margin-bottom: 40px; /* Stellt sicher, dass immer 40px Abstand darunter bleibt */
}
.message p {
text-align: left;
padding-left: 50px;
padding-right: 50px;
}
.message strong {
font-weight: 700;
}
.message p.big {
padding-bottom: 20px;
}
.message p.small {
text-align: left;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 10px;
font-size: 14px;
}
.check {
width: 70px;
height: auto;
display: block;
margin: 0 auto;
}

/* ---- Media Queries ---- */

/****** Desktop big ******/
@media only screen and (max-width: 1600px) {
.logo {
max-width: 150px;
left: 10vw;
}
}
/****** Desktop between ******/
@media only screen and (min-width: 1441px) and (max-width: 1599px) {
.message {
max-width: 80%; /* Verkleinert die Breite auf Tablets */
padding: 20px 0 20px;
}
}
/****** Desktop medium ******/
@media only screen and (max-width: 1440px) {
html {
font-size: 16px;
}
input, input[type=button], input[type=submit] {
   font-size: 16px;
}
.logo {
max-width: 100px;
left: 10vw;
}
.message {
max-width: 80%; /* Verkleinert die Breite auf Tablets */
padding: 20px 0 20px;
}
.message p {
padding-left: 25px;
padding-right: 25px;
}
}
/****** tablet ******/
@media only screen and (max-width: 768px) {
.message {
max-width: 80%;
top: 20vh; /* Etwas weniger Abstand auf kleinen Screens */
padding: 15px 0 25px;
}
}
/****** tablet big portrtait ******/
@media only screen and (min-device-width: 1024px) and (orientation: portrait) {
html, .bullets {
font-size: 22px;
}
input, input[type=button], input[type=submit] {
   font-size: 22px;
}
.main {
background-color: #ffeb00;
background-size: contain;
background-position: center 0;
}
.message {
max-width: 80%; /* Verkleinert die Breite auf Tablets */
padding: 20px 0 20px;
}
}
/****** tablet portrtait ******/
@media only screen and (max-device-width: 768px) and (orientation: portrait) {
.main {
background-color: #ffeb00;
background-size: contain;
background-position: center 0;
}
.logo {
left: 5vw;
max-width: 100px;
}
.message {
max-width: 80%; /* Verkleinert die Breite auf Tablets */
padding: 20px 0 20px;
}
}
/****** tablet landscape ******/
@media only screen and (max-device-width: 812px) and (orientation: landscape) {
.main {
background-image: none !important;
background-color: #ffeb00;
}
.logo {
left: 5%;
max-width: 100px;
}
.message {
max-width: 80%; /* Verkleinert die Breite auf Tablets */
padding: 20px 0 20px;
}
}
/****** mobile ******/
@media only screen and (max-width: 450px) {
.main {
background-position: center top;
}
.logo {
left: 5vw;
max-width: 60px;
}
.message {
max-width: 100%;
top: 18vh; /* geringerer Abstand auf sehr kleinen Screens */
padding: 10px 0 20px;
}
.message p {
font-size: 14px;
}
input, input[type=button], input[type=submit] {
   font-size: 16px;
}
}
/****** mobile small ******/
@media only screen and (max-width: 320px) {
.message {
max-width: 100%;
top: 18vh; /* geringerer Abstand auf sehr kleinen Screens */
padding: 10px 0 20px;
}
}