@font-face {
  font-family: 'Monserrat';
  src: url('font/Montserrat-ExtraLight.woff')format('woff');
}
@font-face {
  font-family: 'Monserrat-ExtraLight';
  src: url("font/Montserrat-ExtraLight.woff2")format("woff2");
}
@font-face {
  font-family: 'Monserrat-Light';
  src: url("font/Montserrat-Light.woff2")format("woff2");
}
@font-face {
  font-family: 'Monserrat-Regular';
  src: url("font/Montserrat-Regular.woff2")format("woff2");
}
@font-face {
  font-family: 'Monserrat-SemiBold';
  src: url("font/Montserrat-SemiBold.woff2")format("woff2");
}
@font-face {
  font-family: 'Monserrat-VariableFont_wght';
  src: url("font/Montserrat-VariableFont_wght.ttf")format("truetype");
}
@charset "UTF-8";

body {
  margin: 0;
  font-family: Monserrat-Light,Monserrat-ExtraLight,"Merriweather", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-x:hidden;
  position: relative;
  height: auto;
    
  color: #212529;
  background-color: #6e6e6e;
  -webkit-text-size-adjust: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  
  font-family: Monserrat-Light,Monserrat-ExtraLight,"Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  
}

/* Keyframes für Slide-in */
@keyframes navFadeIn {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


/* Initialer Zustand */
nav a {
    opacity: 0;
    transform: translateY(-20px);
    animation: navFadeIn 0.8s ease-out forwards;
    position: relative;
}

/* Verzögerungen pro Item (z. B. 3 Links) */
nav a:nth-child(1) { animation-delay: 0.3s; }
nav a:nth-child(2) { animation-delay: 0.5s; }
nav a:nth-child(3) { animation-delay: 0.7s; }

/* Hover-Effekt mit leichtem Glow */
nav a:hover {
    color: #00ffff;
    text-shadow: 0 0 8px #00ffffaa, 0 0 20px #00ffff44;
    transition: text-shadow 0.3s ease, color 0.3s ease;
}


.word {
    display: inline-block;
    transition: transform 0.2s ease;
    position: relative;
}

.hero-glitch:hover .word {
    animation: wordDance 0.4s ease-in-out;
}

@keyframes wordDance {
    0%   { transform: translateX(0px) translateY(0px) rotate(0deg); }
    25%  { transform: translateX(1px) translateY(-1px) rotate(-0.5deg); }
    50%  { transform: translateX(-1px) translateY(1px) rotate(0.5deg); }
    75%  { transform: translateX(0.5px) translateY(-0.5px) rotate(-0.25deg); }
    100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
}

.btn:hover {
    animation: btnPulse 0.3s ease-in-out;
	background-color: #8aced6;
}

@keyframes btnPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}


.hero-bg img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: brightness(1.1);
}

.char {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    will-change: transform;
}

#heroHeadline:hover .char {
    animation: charGlitch 0.4s ease forwards;
}

@keyframes charGlitch {
    0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
    25%  { transform: translateY(-2px) rotate(-0.5deg); opacity: 0.95; }
    50%  { transform: translateY(2px) rotate(0.3deg); opacity: 1; }
    75%  { transform: translateY(-1px); }
    100% { transform: translate(0, 0) rotate(0); }
}

/* Jede Zeile als Block, aber zentriert */
.line {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

/* Falls nötig: Headline insgesamt zentriert */
#heroHeadline {
    font-size: clamp(1.4rem, 4vw + 0.5rem, 3.5rem);
  text-align: center;
}

#heroHeadline br {
    line-height: 1.2;
    display: block;
}

.hero-overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0,0,0,0.6));
    pointer-events: none;
}

.text-shadow {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.text-headline{
	color: #8aced6;
}

/*footer*/


html,
        body {
            height: 100%;
		}
.sizer_p{
	font-size:1.2rem;
}		
	
.burger_icon{
	flex-grow: 1; 
    margin-right: 0 ;
	height: 2rem;
	border:0.5px solid #FF8000;
	border-radius:5px;
	opacity:0.6;
	transition:0.3s ease-in-out;
}
.burger_icon:hover{
	opacity:1;
	border-radius:5px;
	box-shadow:5px 10px #FF8000;
	
}
.nav_gate{
	font-family:'Monserrat-Light';
	color:grey;
	font-weight:600;
	font-size:1.2rem;
	padding-top:20px;
	padding-right:20px;
	opacity:0.5;
}
.navbar-toggler{
	border:none;
	box-shadow: 0 0 0 0.0rem;
}
.navbar-toggler:focus{
	border:none;
}
.navbar-toggler:active{
	border:none;
}
.navbar-toggler:hover{
	border:none;
}
.menu-center{
	margin:0 auto;
	width:400px;
}
.line_nav{
	border-bottom:1px solid black;
	border-radius:3px;
	padding:5px;
	width: 100%; 
    max-width: 400px; 
    
}
.sub_nav{
	font-family:'Monserrat-Light';
	color:grey;
	font-weight:700;
	font-size:0.7rem;
	padding-left:15px;
}		
	
#wrapper {
	        min-height: 100%;
            display: flex;
            flex-direction: column;
			
        }
.grey_cont{
	background-color: #151515;
}		
.codepic{
	margin-top:10rem;
	margin-left:10%;
    align-items: center;
	width:80%;
}
.brandlogg{
	width:15vmin;
	height:auto;
	opacity:0.6;
}
.span_foot{
	padding:3px;
	font-family: 'Monserrat-Light';
	font-size:0.8rem;
	border:none;
	border-left:1px solid black;
	border-right:1px solid black;
	border-radius:2px;
}
.center_foot{
	margin:0auto;
	padding-top:2rem;
}
.cook_i{
	font-weight:200;
	max-width:25%;
	
}
.burg-toggle {
    margin-top: 3vh;
	
}
.full_set{
	width:100%;
}
.grey_foot{
	background-color: #1C1C1C;
}
.foot_data{
	margin-left:1rem;
	padding:2px;
	font-family:'Monserrat-Light';
	font-size:1.0rem;
	font-weight:500;
	letter-spacing:1.4;
	border:none;
	border-left:1px solid black;
	border-right:1px solid black;
	border-radius:1.5px;
}
.foot_data_top{
	margin-left:0rem;
	padding:0px;
	font-family:'Monserrat-Light';
	color:grey;
	font-size:1.0rem;
	font-weight:300;
	letter-spacing:1.4;
	opacity:0.95;
	
}
.rights_imp {
	
	color:grey;
	padding-right:10px;
	font-size:1.0rem;
	font-weight:200;
	letter-spacing:1.4;
	
}
.rights{
	
	color:grey;
	padding-right:10px;
	font-size:1.0rem;
	font-weight:200;
	letter-spacing:1.4;
	white-space:nowrap;
}
.orange{
	background-color:#8aced6;
	-moz-background-color: #8aced6;
	width:3px;
	height:10px;
	margin-left:6px;
	margin-right:6px;
	margin-bottom:2px;
}
.orange_county{
	font-family: 'Monserrat-Light';
	font-size:2.0rem;
	color:#FF8000;
	font-weight:100;
}
.orange_county_offer{
	font-family: 'Monserrat-Light';
	font-size:1.7rem;
	letter-spacing:1.2rem;
	color:#FF8000;
	font-weight:100;
}
.orange_county_offer_signs{
	font-family: 'Monserrat-Light';
	font-size:1.7rem;
	
	color:#FF8000;
	font-weight:100;
}
.orange_county_nav{
	font-family: 'Monserrat-Light';
	font-size:1.2rem;
	color:#FF8000;
	font-weight:300;
}
.linie_set {
    height: 4vh;
    width: 1px;
    background-color: grey;
    margin: 0 auto;
}
option{
	background-color:#151515;
	color:grey;
}
select:hover {
    border-color: #FF8000;
}
select:active, select.selected {
    border-color: #FF8000;
    background-color: #FF8000;
}
.yourdropdown ul li:active, .yourdropdown ul li:hover, .yourdropdown ul li:focus {
    background-color: #FF8000;
}

.setfoot{
	margin-top:3rem;
}
.lefter{
	margin-left:3rem;
}
.lefter_bio{
	margin-left:0rem;
}
.righter_ref{
	margin-left:35vmin;
}
.righter{
	float:right;
}

.setmiddle{
	margin-top:8rem;
}
.setmiddle_push{
	margin-top:-5rem;
}
.setmiddle_agb{
	margin-top:0rem;
}
.setmiddlein{
	margin-top:4rem;
}
.space_agb{
	margin-top:3.5vh;
}
.blockmiddle{
	margin-top:2rem;
	
}
.headsec{
	margin-top:5vh;
}
.double_bag{
	margin-left:-2%;
}
button{
	border:none;
}		
.bn2 {
  display: inline-block;
  font-family: 'Monserrat-Light';
  font-weight: 400;
  line-height: 1.5;
  color: #E6E6E6;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: transparent;
  border-bottom:1px solid #FF8000;
  
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .bn2 {
    transition: none;
  }
}
.bn2:hover {
  color: #FF8000;
}
.align_bn{
	margin-top:-5.5rem;
}
.sm_bn{
	max-width:10rem;
}	
.liner{
	color:silver;
	border-bottom:1px solid silver;
}
.bend {
  width: 100%; 
  height: 100px;  
  border: solid 1px silver;
  border-color: silver transparent transparent transparent;
  border-radius: 50%/25px 25px 0 25px;
        }	
.phil-link{
	color:black;
}
.phil-content{
	margin-top:12vh;
}
.fonter{
	font-family: 'Monserrat-Light';
	color:grey;
}
.fonter_nav{
	margin-top:2vh;
	font-family: 'Monserrat-Regular';
	font-weight:bold;
	letter-spacing:1.5px;
	color:grey;
}
.hist{
	font-family: 'Monserrat-Regular';
	font-weight:bold;
	color:grey;
	opacity:0.95;
	
}
.fontsetcast{
	max-width:400px;
	min-height:10rem;
	width:95%;
	line-height:1.85;
	margin-bottom:3vh;
}
.fontsetcast_agb{
	
	width:95%;
	line-height:1.85;
	margin-bottom:0.7vh;
}
.fontsetcast_off{
	
	width:95%;
	line-height:1.85;
	margin-bottom:0.7vh;
	white-space:nowrap;
}
.bold{
	font-family: 'Monserrat-SemiBold';
	font-weight:600;
}
.ultralight{
	font-weight:200;
}
.light{
	font-weight:300;
}
.frontpage{
	font-family: 'Monserrat-Light';
	font-size:2.5vw;
	font-weight:200;
}
.rightset{
	float:right;
	text-align:right;
	margin-right:0rem;
}
.headsize{
	font-size:1.6rem;
}
.blockset{
	margin-left:1.0%;
}
.blockset_mod{
	margin-left:-0,5%;
}
.blockset_phil{
	margin-left:-0.5%;
}
.blockset_con{
	width:80%;
	margin-left:3%;
}
.blockset_me{
	margin-left:-1%;
}
ul {
  list-style: none;
}
ul li::before {
  content: "";
  color: black;
  font-weight: light;
  display: inline-block;
  width: 15px;
}
.buller{
	color:grey;
	font-weight:light;
}
.lister{
	margin-left:-1.5%;
}
.form-control{
	background-color:#1C1C1C;
	border:none;
	border-bottom:1px solid grey;
	border-radius: 0.25rem;
}
.list-group{
	color:grey;
}
.check_f{
	background-color:#1C1C1C;
}
.former{
	text-align:right;
	padding-right:3rem;
}
.serv{
	display:none;
}

.inst_log{
	margin-top:8px;
	padding:15px;
	width:27px;
	height:27px;
	
}
.inst_set{
	width:27px;
	height:auto;
}
.zentrierter-button {
	font-family: 'Monserrat-ExtraLight';
	font-size:0.8rem;
	color:white;
    margin: 0 auto;
    margin-bottom: 10vh;
    display: block;
	background-color:transparent;
	border:1px solid white;
	padding:15px;
	z-index:9999;
	animation: bewegung 2s infinite alternate;
}

@keyframes bewegung {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(20px);
    }
}
@media (orientation: portrait) and (max-device-width: 321px)
        {
			.zentrierter-button{
				padding:5px;
				font-size:0.8rem;
			}
}
.sticky-container {
      position: fixed;
      top: 50%;
      right: 0rem;
	  transform: translate(50%, -50%);
      width: 70px;
      height: 70px;
      border: 1px solid white;
	  display: flex;
      align-items: center;
      justify-content: center;
	  animation: sticker 2s infinite alternate;
    }
	@keyframes sticker {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(20px);
    }
}

    .content-link {
	  font-family: 'Monserrat-Light';
	  font-weight:100;
	  font-size:0.9rem;
      text-align: center;
      text-decoration: none;
      color: white;
      transition:color 0.5s ease-in-out;
    }
	.content-link:hover{
		color:grey;
	}
	
/*about*/

.about-section {
  background: transparent;
  color: #8aced6;
}
.about-section {
  display: block;
  overflow: visible;
  min-height: 100px; /* oder passend zur gewünschten Darstellung */
}
.about-section {
  padding-bottom: 8rem; /* passt zum Footer */
}

.text-block {
  background: rgba(0,0,0,0.5);
  padding: 2rem;
  border-radius: 0.75rem;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  transform: scale(0.95);
  animation: fadeIn 0.6s ease forwards;
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .text-block {
    text-align: center;
    padding: 1.5rem 1rem;
  }
}

.onview:hover{
	/*color: #00ffff;*/
    text-shadow: 0 0 4px #00ffffaa, 0 0 10px #00ffff44;
    transition: text-shadow 0.3s ease, color 0.3s ease;
}

/*Images*/

.gpu-image {
  max-width: 100%;
  height: auto;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.gpu-image:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(215, 250, 254, 0.15);
}

.hanging-list li {
  padding-left: 1rem;
  text-indent: -2.5rem;
}
.white-square {
  display: inline-block;
  width: 0.25rem;          /* reduziert auf ca. 65% */
  height: 0.25rem;
  background-color: white;
  border-radius: 0.15rem;  /* bleibt dezent */
  margin-right: 0.4rem;
  margin-bottom:0.3rem;
  vertical-align: middle;  /* sorgt für Text-Zentrierung */
}