@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: normal;
  src: local('Anton-Regular'),
       url(../fonts/Anton-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('OpenSans-Light'),
       url(../fonts/OpenSans-Light.ttf) format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('OpenSans-LightItalic'),
       url(../fonts/OpenSans-LightItalic.ttf) format('truetype');
}


@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('OpenSans-Bold'),
       url(../fonts/OpenSans-Bold.ttf) format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('OpenSans-BoldItalic'),
       url(../fonts/OpenSans-BoldItalic.ttf) format('truetype');
}

html,body {
height: 100%;
}

* {
margin:0;
padding:0;
}

body {
background: #000;
color: #fff;
font-family: 'Open Sans';
font-size: 1rem;
text-align: center;
-webkit-font-smoothing: antialiazing;
}

.pclass  {
color: #777777;
font-weight: normal;
text-align: center;
margin-left: 20%;
margin-right: 20%;
float: left;
}

ul  {
list-style:none;
margin:0;
padding:0;
}
 
a, a:visited {
color: #fff;
text-decoration: none;
font-weight: bold;
}

a:hover {
color: #fff;
}

a:focus, a:active {
color: #fff;
} 

img {				/* Responsive images */
max-width: 100%; 
height: auto;
}

h1 {
font-family: 'Anton'; 	
font-weight: normal;
color: #fff;	
font-size: 3rem;
line-height: 1.8rem;
margin: 5% 0% 0% 10%;	
}

h2 {
font-family: 'Anton'; 	
font-weight: normal;
color: #fff;	
font-size: 1.5rem;
line-height: 3.15rem;
word-spacing: 20px;
text-align: right;
margin: 5% 10% 0% 5%;		
}

.topline {
width: 100%;
float: left;	
}

.boxleft, .boxright {
width: 50%;
float: left;	
}

.headerbox {
width: 100%;
margin: 0 auto;
float: left;
}

.back-video {
width: 60%;
right: 0;
bottom: 0;
z-index: -1;	
}

.back-video-mobile {
width: 100%;
right: 0;
bottom: 0;
z-index: -1;	
}

#lboxes {
  display: flex;
  justify-content: center; /* Zentriert die ganze Gruppe mittig */
  gap: 10px;               /* HIER steuerst du den Abstand (z.B. 5px für noch enger) */
  width: 100%;             /* Container nutzt den Platz */
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 20px;
}

.lbox {
  /* Keine Breitenangabe (width) hier! Die Box passt sich dem Bild an */
  display: flex;
}

.lbox img {
  width: 3vw;              /* Nutzt 8% der Bildschirmbreite -> super für Mobile */
  max-width: 50px;         /* Verhindert, dass sie am Desktop zu groß werden */
  height: auto;
  display: block;
}


#footer {
background: #000;
width: 100%;
text-align: center;
padding-top: 1%;
padding-bottom: 1%;
color: #777777;
font-weight: bold;
font-size: 0.75rem;
text-decoration: none;
bottom: 0;
float: left;
}

#footer  p {
word-spacing: 0.60rem;
}

#footer a, #footer a:visited, #footer a:active, #footer a:hover {
color: #777777;
}


#lboxesmobile {
	display: none;		
}		

.abgerundeter-text {
    border: 3px solid #F6D14B; 
    border-radius: 15px;         
    padding: 10px 32px 14px 32px; 
    display: inline-block;  
    font-family: 'Anton'; 	
    font-weight: normal;
    color: #fff;	
    font-size: 1.8rem;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 30px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- LOGIK --- */


.status-normal {
    text-decoration: underline;
    text-decoration-color: #F6D14B;
    display: inline-block; /* Hilft bei der sauberen Darstellung */
}

/* Standardmäßig den Klick-Text verstecken */
.status-klick {
    display: none;
}

/* WENN GEKLICKT: */

/* 1. Verstecke den normalen Text-Block komplett */
#toggle-hinweis:checked + .abgerundeter-text .status-normal {
    display: none;
}

/* 2. Zeige den Klick-Text-Block an */
#toggle-hinweis:checked + .abgerundeter-text .status-klick {
    display: inline;
    text-decoration: none !important; /* Falls "In Kürze" nicht unterstrichen sein soll */
}








									
																/*..........POP-UP Start..........*/																
.pbutton {
background: #585858;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
line-height: normal;
padding: 0.5rem 1rem;
border: 1px solid #FFF;
vertical-align: middle;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
border-radius: 0.3em;
}

#mydiv {
background: rgba(116, 116, 116, 0.9);
width: 100%; 
overflow: hidden;
bottom: 0;
position: fixed;
z-index: 200;
text-align: center;
font-size: 85%;
color: #fff;
padding: 5px 0px;
}

#mydiv a {
color: #fff;
font-weight: bold;
}					





									
																/*..........POP-UP End..........*/																
																
																/*..........MOBILE View..........*/															
/*.....Hides Mobile Menu.....*/
.toplinemobile, .titlebox, .headerboxmobile, .lboxmobile, .abgerundeter-text-mobile {
display: none;		
}



/*<--------------------------------------------------------------------------------------------------------------------------------------------->*/
/*..............................................................MEDIA QUERIES Start..............................................................*/
/*<--------------------------------------------------------------------------------------------------------------------------------------------->*/

@media screen and (max-width: 680px) {
/* Bildschirmbreiten bis maximal 680 Pixel */

/*.....Hides Desktop Menu and Headerpic.....*/ 
.topline, .headerbox, .abgerundeter-text {
display: none;		
}

#lboxes {
display: none;		
}

.toplinemobile {
display: block;		
width: 100%;
float: left;
}

.titlebox {
display: block;		
width: 100%;
float: left;	
}

.headerboxmobile {
display: block;
width: 100%;
margin: 0 auto;
float: left;
}

.headerboxmobile img {
width: 100%;
}

#lboxesmobile {
  display: flex;
  justify-content: center; /* Zentriert die ganze Gruppe mittig */
  gap: 10px;               /* HIER steuerst du den Abstand (z.B. 5px für noch enger) */
  width: 100%;             /* Container nutzt den Platz */
  margin: 0 auto;
  padding-top: 20px;
}

.lboxmobile {
  /* Keine Breitenangabe (width) hier! Die Box passt sich dem Bild an */
  display: flex;
}

.lboxmobile img {
  width: 8vw;              /* Nutzt 8% der Bildschirmbreite -> super für Mobile */
  max-width: 50px;         /* Verhindert, dass sie am Desktop zu groß werden */
  height: auto;
  display: block;
}


.abgerundeter-text-mobile {
    border: 3px solid #F6D14B; 
    border-radius: 15px;         
    padding: 10px 32px 10px 32px; 
    display: inline-block;  
    font-family: 'Anton'; 	
    font-weight: normal;
    color: #fff;	
    font-size: 1.25rem;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}





h1 {
font-size: 2rem;
line-height: 1.5rem;
text-align: center;
margin: 5% 0% 1% 0%;	
}

h2 {
font-size: 1rem;
line-height: 1rem;
word-spacing: 20px;
text-align: center;
margin: 0% 0% 2% 0%;	
}

.pclass {
font-size: 90%;
margin: 5% 5% 0% 5%;
padding: 0;
}


#footer {
width: 90%;
margin: 5%;
padding: 0%;
}

#footer  p {
word-spacing: 0rem;
}


} /*<====.....MEDIA QUERIES End.....*/