html, body {
overflow-x: hidden;
font-family: 'Poppins', 'Arial' !important;
}
h2 {
font-size: calc(1.325rem + 1.5vw) !important;
}
.paragraph_spezielleGroesse {
font-size: 14px;
}
/* Navbar Start */
/* Grundzustand der Navbar-Links */
.navbar-animation {
position: relative;
color: white;
}
/* Animationseffekt bei Hover */
.navbar-animation::after {
content: '';
position: absolute;
width: 0; /* Anfangswert ist 0, damit es beim Hover expandiert */
height: 2px;
background-color: #fff; /* Die Farbe des Unterstrichs */
bottom: 0;
left: 50%; /* Der Strich startet in der Mitte */
transform: translateX(50%, -50%); /* Zentriert den Strich */
transition: width 0.3s ease, left 0.3s ease; /* Animiert Breite und Position */
}
/* Hover-Effekt */
.navbar-nav .nav-link:hover {
color: bisque !important; /* Farbwechsel zu einem schönen Akzent (bisque) */
}
.navbar-animation:hover::after {
width: 100%; /* Beim Hover wird der Strich auf die volle Breite erweitert */
left: 0; /* Verschiebt den Strich nach links, damit er von der Mitte ausgeht */
}
/* Navbar End */
.mandel-farbe {
color: #4DB1E2;
}
.mandel-hintergrund-farbe {
background-color: #4DB1E2;
}
.header_bild {
background-image: url("img/mandel_bild.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 510px;
position: relative;
overflow: hidden; /* Verhindert, dass Inhalte über den Container hinausragen */
}
.img-animation {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.img-animation:hover {
transform: scale(1.1); /* Bild vergrößern */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); /* Schatten hinzufügen */
}
/* Video-clip */
.background-clip {
}
/* Video-clip End */
/************************************** OWL-Carousel Start ***************************************/
.carousel .owl-next,
.carousel .owl-prev {
background-color: none !important;
color: #4DB1E2 !important;
font-size: 50px !important;
width: 40px;
height: 70px;
}
.carousel .owl-next:hover,
.carousel .owl-prev:hover {
background-color: transparent !important;
color: inherit !important;
}
.carousel {
margin-top: 50px;
}
.carousel .owl-nav {
position: absolute;
right: 20px;
top: -100px;
}
.owl-carousel {
padding: 0 10px; /* Oder ein anderer Wert */
}
.owl-theme .owl-dots .owl-dot span {
width: 22px !important;
height: 22px !important;
margin-top: 20px !important;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
background-color: white !important;
}
/*************************************** OWL-Carousel End ***************************************/
.ueber_kontakt_bild {
height: auto;
background-image: url(img/mandel_fragen_zwei.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/************************************** Kontakt Start **************************************/
.kontakt_bild {
background-image: url("img/mandel_kontakt_bild.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 550px;
}
.FormElement {
color: #111;
}
.FormElement input {
background: transparent;
border: none;
padding: 10px;
width: 100%;
border-bottom: 2px solid black;
}
.FormElement input:hover {
background: #4DB1E2;
transition: ease-in 0.2s;
}
.FormElement textarea {
background: transparent;
border: none;
padding: 10px;
width: 100%;
border-bottom: 2px solid black;
}
.FormElement textarea:hover {
background: #4DB1E2;
color: white;
transition: ease-in 0.2s;
}
::placeholder {
color: black;
}
.quali_inno_bilder_skalierung {
width: 100% !important; /* Passt die Breite an das Raster an */
height: 250px !important; /* Einheitliche Höhe */
object-fit: cover !important; /* Skaliert das Bild ohne Verzerrung */
}
input,
textarea {
background-color: white; /* Standard Hintergrundfarbe */
color: black; /* Textfarbe */
transition: background-color 0.3s ease; /* sanfter Übergang */
}
/* Wenn das Feld fokussiert ist */
input:focus,
textarea:focus {
background-color: #4DB1E2; /* Hintergrund wird schwarz */
}
/* Placeholder bei Fokussierung */
input:focus::placeholder,
textarea:focus::placeholder {
color: white; /* Placeholder wird weiß */
}
#checkbox {
width: 10%;
vertical-align: sub;
}
#ContactButton {
width: 100% !important;
border-radius: 0px;
font-weight: bold;
height: 50px;
background: #4DB1E2;
color: white;
border-bottom: 2px solid transparent;
}
#ContactButton:hover {
background: dodgerblue;
color: black;
box-shadow: none;
border-bottom: 2px solid transparent;
transition: linear all 0.2s;
}
/*================== Cookies Start =====================*/
.alert-success {
font-family: 'Lato', sans-serif !important;
color: #fff !important;
background-color: #4DB1E2 !important;
border: 0 !important;
border-radius: 0px !important;
}
.alert-success .close {
color: #fff;
text-shadow: none;
font-size: 2.5rem;
}
.alert-success .close:hover {
background-color: rgba(200, 0, 0, 0.9);
padding-left: 5px;
padding-right: 5px;
}
.alert-success p {
margin-bottom: 0.4rem;
}
.alert {
padding: 0.75rem !important;
}
/*================== Cookies Ende =====================*/
/************************************** Kontakt End **************************************/
/* Smartphones Start */
@media (max-width: 576px) {
.res_kontakt {
margin-top: 2rem;
margin-bottom: 2rem;
}
.res_abstand_tag {
margin-left: 2.3rem;
}
.res_rahmen {
margin-top: 50px;
}
.width_res {
margin-top: 70px !important;
width: 100% !important;
}
.mandel_ueberschrift_res {
font-size: 50px !important;
}
.img-bilder-mobile {
width: 80% !important;
}
.img_bilder_abstand {
--bs-gutter-x: 0rem !important; /* Horizontaler Abstand für kleine Bildschirme */
--bs-gutter-y: 2rem !important; /* Vertikaler Abstand für kleine Bildschirme */
}
.unser_versprechen_abstand_res {
margin-top: 50px;
}
.mandel_dental_labor_logo_res {
margin-top: 20px !important;
margin-left: 0px !important;
width: 170px;
}
.mandel_dental_labor_frau_res {
width: 300px;
margin-left: 150px !important;
}
.responsive_schrift {
font-size: 8px;
}
/* das brauchst du damit das auf allen ansichten gut aussieht für OWL */
.owl-carousel .item img {
max-width: 55%; /* Passe die maximale Breite des Bildes an */
margin: auto; /* Horizontale Zentrierung des Bildes. das ist MAGISCH. versuche genau herauszufinden was dieses auto macht */
}
.navbar-animation::after {
content: none; /* Entfernt das Pseudoelement auf mobilen Geräten */
}
.navbar-animation:hover::after {
width: 0; /* Verhindert, dass der Strich auf mobilen Geräten angezeigt wird */
}
}
/* Smartphones end */
/* Tablet Start */
@media (min-width: 577px) and (max-width: 768px) {
.img-bilder-mobile {
width: 50%;
}
.mandel_dental_labor_frau_res {
width: 50%;
margin-left: 150px !important;
align-items: right !important;
}
.mandel_dental_labor_logo_res {
margin-top: 20px !important;
margin-left: 0px !important;
width: 170px;
}
.width_res {
margin-top: 70px !important;
width: 100% !important;
}
.img-bilder-mobile {
width: 80% !important;
}
.img_bilder_abstand {
--bs-gutter-x: 0rem !important; /* Horizontaler Abstand */
--bs-gutter-y: 2rem !important; /* Vertikaler Abstand */
}
.responsive_schrift {
font-size: 12px;
}
}
/* Tablet End */
/* Laptop Start */
@media (min-width: 768px) and (max-width: 991.98px) {
.width_res {
margin-top: 70px !important;
width: 100% !important;
}
}
/* Laptop End */
/* Big screens Start*/
@media (min-width: 992px) and (max-width: 1199px) {
.width_res {
margin-top: 70px !important;
width: 100% !important;
}
}
/* Big Screens End */