@charset "utf-8";
/* CSS Document */
/*roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v51-latin-regular.woff2') format('woff2'), /* Supermodern */
       url('../fonts/roboto-v51-latin-regular.woff') format('woff'); /* Moderne Browser */
}
/* inria-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inria Serif';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inria-serif-v18-latin-700regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inria-serif-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inria Serif';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/inria-serif-v18-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
h0 {
    font-size: 5rem;
}
html {
    scroll-behavior:smooth;
}
body {
    font-family: Roboto, sans-serif;
    color: #333333;
    background-color: #fefef3;
    margin: 0;
    padding: 0;
    line-height: 2.0rem;
}
.top-2rem {
    margin-top: 2rem;
}
.bottom-2rem {
    margin-bottom: 2rem;
}
.philo {
    background-image: url("../images/philosophie/plato-color-3.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
}
.zweirem-pad {
    padding: 2rem;
}
h1 {
    font-family: irina, serif;
    padding-top: 3rem;
    padding-bottom:1rem;
    font-size: 3rem;
    color: #ff8000;
}
.logo-300 {
    max-width: 300px;
    max-height: 300px;
}

#leistungen {
    padding-top: 160px;
    scroll-margin-top: 0px;
}
/* HEADER */
.main-header{
    position:sticky;
    top:0;
    background:#333;
    height:100px;
    z-index:999;
}
.weiter {
    background: #ffbb00;
    color: #333333;
    border-radius: 15px;
}
.weiter:hover {
    background: #ff8000;
    color: #ffffff;
}
/* NAVBAR */
.navbar{
    height:100px;
}

/* LOGO */
.logo-wrap{
    position:relative;
    z-index: 1000;
}

.logo-wrap img{
    height:80px;
    position:absolute;
    top:-50px;
}

/* LOGO ragt unten über Menü */
/*.logo-wrap img{
    transform:translateY(0px);
}*/

/* Sticky Menu */
.sticky-top {
    background-color: #fefef3;
    z-index: 1020;
    box-shadow: 0 2px 15px rgba(0,0,0,0.3);
}

.navbar-nav .nav-item .nav-link {
    color: #333;
    background-color: #fefef3;
    font-weight: 700;
    text-align: center;
}

.navbar-nav .nav-item .nav-link:hover {
    color: #ff8000;
    text-decoration: underline;
    font-weight:700;
}

/* Dropdown */
.dropdown-menu {
    background-color: #fefef3;
    /*text-align: center;*/
}
.dropdown-menu .dropdown-item {
    background-color: #fefef3;
    color: #333333;
}
.dropdown-menu .dropdown-item:hover {
    background-color: #ff8000;
    color: #fff;
}

/* Hero */
.hero {
    position: relative;
    width: 100%;
    height: 600px;
    background: url("../video/dna.mp4") center center/cover no-repeat; /* Video alternativ über <video> */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

/* Hero Text */
.hero-text {
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
.hero h1 {
    font-size: 3rem;
}
.hero p {
    font-size: 1.5rem;
}
/* Pulsierendes Dreieck */
.hero-arrow {
    position: absolute;
    bottom: 20px;
    left: 45%;
    transform: translateX(-50%);
    border-left: 37.5px solid transparent; /* Hälfte der Breite */
    border-right: 37.5px solid transparent;
    border-top: 50px solid #fff; /* Farbe Dreieck */
    animation: bounce 2s ease-in-out infinite;
    transition:all .35s ease;
 /*animation:arrowMove 2.5s infinite;*/
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
/*Bewegen mit Schatten*/
.hover-img {
    width: 80%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hover-img:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
/*End Bewegen mit Schatten*/


/* Footer */
 footer {
    background-color: #FEFEF8;
    padding: 40px 0;
    color: #333;
    line-height: 1.5rem;
    -webkit-box-shadow: 0px -2px 24px #8C8C8C;
    box-shadow: 0px -2px 24px #8C8C8C;
    background-repeat: no-repeat;
}

footer .footer-col {
    margin-bottom: 20px;
    padding-left: 0%;
    paddingright: 0%;
}
footer .footer-col h5 {
    font-weight: bold;
    margin-bottom: 15px;
}
footer .footer-col p {
    margin: 0 0 5px;
}
.wichtiger-hinweis {
    background: #f5f5f5!important;
    margin-top: 3rem;
    margin-bottom: 0rem;
    padding: 1rem;
    border-radius: 20px;
}

/*Hover-Effekt*/
.image-container {
    width: 1200px; /* gewünschte Breite */
    margin: 50px auto;
    overflow: hidden; /* verhindert, dass Bild beim Skalieren überläuft */
    border-radius: 15px; 
  }

.image-container .img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    display: block;
    border-radius: 15px;
  }
.image-container .img:hover {
    transform: scale(1.05); /* leichte Vergrößerung */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); /* weicher Schatten */
  }

.rund {
    border-radius: 15px;
}
  .image-container:hover {
    width: 100%;
    height: auto;
  }

/* Optional: responsiv */
@media (max-width: 767px) {
.image-container {
    width: 90%;    
}
#hero {
    display:none;
}
.hero h1 {
    font-size: 1.2rem;
}
.hero p {
    font-size: 1.2rem;
}
footer .footer-col {
    margin-bottom: 25px;
    padding-left: 0%;
}    
}

.centerimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.link-text {
    color: #333333;
}
.link-text:hover {
    color: #ff8000;
}
/*img-hover-section*/
.image-hover-section {
	background: #fff;
}
.content{
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.image-hover-box {
	width: 100%;
	max-height: 600px;
	overflow: hidden;
	position: relative;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.4s ease;
}

.image-hover-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover-Effekt */
.image-hover-box:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 15px 40px rgba(0,0,0,0.28);
}
.content {
    margin-bottom: 5rem;
}
.cta {
  display: flex;                /* Aktiviert Flexbox */
  justify-content: center;      /* Horizontal zentrieren */
  align-items: center;          /* Vertikal zentrieren */
}
.vitacellnetic {
    padding-bottom: 5rem;
}