/* <uniquifier>: Use a unique and descriptive class name */
/* <weight>: Use a value from 300 to 700 */

.jura-font {
  font-family: "Jura", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/*  <uniquifier>: Use a unique and descriptive class name */
/* <weight>: Use a value from 300 to 700 */

.teko-font {
  font-family: "Teko", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/* Allgemeine Stile */
		body {
    		font-family: "Jura", sans-serif;
			color: #fff;
			background-image: url('bilder/hintergrund.jpg');
    		background-attachment: fixed;
    		background-position: center;
    		background-repeat: repeat;
    		background-size: auto;
		}

	@media (max-width: 768px) {
    	.navbar h1 {
        	display: none; 
    	}
    	.navbar-brand {
       	 	justify-content: flex-start; 
    		}
		}
   	 .navbar-toggler:focus,
   	 .navbar-toggler:active {
   		 outline: none;
   		 color: #fff;
   		 box-shadow: none;
   		 border: none;
   	 }
   	 .navbar-toggler-icon {
   		 outline: none;
   		 box-shadow: none;
   		 color: #fff;
   	 }
		.custom-bg {
    		background-color: #5b2c48 !important; 
		}
		.card {
		    position: relative;
		    background-color: rgba(91, 44, 72, 0.7); /* Transparenter Hintergrund */
		    padding: 20px; /* Innenabstand */
		    border-radius: 12px; /* Abgerundete Ecken */
		    color: #fff; /* Textfarbe */
		}
		.korb {
		    background-color: rgba(91, 44, 72, 0.7); /* Transparenter Hintergrund */
		    padding: 20px; /* Innenabstand */
		    border-radius: 12px; /* Abgerundete Ecken */
		    color: #fff; /* Textfarbe */
		}
/* Navigation */
.navbar-brand-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: flex-end; /* Align items to the bottom */
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
}

@media (min-width: 992px) {
    .navbar-collapse {
        justify-content: flex-end !important;
    }
}
.modal-header {
	background-color: #1f0d30;
}
/* Star animations */
     @keyframes twinkling {
         0% { opacity: 0.5; }
         50% { opacity: 1; }
         100% { opacity: 0.5; }
     }

     .star {
         position: absolute;
         width: 2px;
         height: 2px;
         background: white;
         border-radius: 50%;
         animation: twinkling 2s infinite;
     }

     /* Different delays for stars */
     .star:nth-child(2) { animation-delay: 1s; }
     .star:nth-child(3) { animation-delay: 2s; }
     .star:nth-child(4) { animation-delay: 3s; }
     .star:nth-child(5) { animation-delay: 4s; }

     /* Star positions */
     .star:nth-child(1) { top: 10%; left: 20%; }
     .star:nth-child(2) { top: 30%; left: 40%; }
     .star:nth-child(3) { top: 50%; left: 60%; }
     .star:nth-child(4) { top: 70%; left: 80%; }
     .star:nth-child(5) { top: 90%; left: 90%; }
.navbar {
    color: #fff;
    background-color: #1f0d30; /* Hintergrundfarbe der Navigation */
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
}

.navbar-brand {
    margin-right: 0; /* Standardabstand rechts entfernen */
    padding: 0; /* Remove any padding */
    display: flex;
    align-items: flex-end; /* Align items to the bottom */
}

.navbar-brand h1 {
    color: #fff; /* Textfarbe des Titels */
    margin-left: 15px;
    margin-bottom: 0; /* Abstand zwischen Logo und Titel */
    font-size: 24px; /* Schriftgröße des Titels anpassen */
    padding: 0; /* Remove any padding */
}

.navbar-brand img {
    margin-bottom: 0; /* Ensure no margin at the bottom of the image */
    padding: 0; /* Remove any padding */
    vertical-align: bottom; /* Align the image to the bottom */
}

/* Basis-Styling für große Displays */
.big-size {
    background-color: #c8818f !important; /* Updated background color */
    display: flex; /* Nutzt Flexbox */
    align-items: center; /* Zentriert den Inhalt vertikal */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    text-align: center; /* Zentriert den Text horizontal */
    font-size: 3rem; /* Große Schrift für Desktop */
    padding: 0.375rem 0.75rem;
    white-space: nowrap;
    display: inline-block;
}

.formular {
    width: 90%;
    max-width: 600px; /* Maximale Breite des Formulars */
    background: white; /* Hintergrundfarbe */
    padding: 20px; /* Innenabstand */
    margin: auto; /* Zentriert das Formular horizontal */
    border-radius: 15px; /* Abgerundete Ecken */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Schatten für den Hintergrund */
}

/* Anpassungen für Tablets */
@media (max-width: 992px) {
    .big-size {
        font-size: 2.5rem; /* Etwas kleinere Schrift für Tablets */
    }
}

/* Anpassungen für mobile Geräte */
@media (max-width: 768px) {
    .big-size {
        font-size: 2rem; /* Noch kleinere Schrift für Handys */
        padding: 0.5rem 1rem; /* Größeres Padding für bessere Touch-Zielflächen */
    }
}

/* Anpassungen für sehr kleine Displays */
@media (max-width: 480px) {
    .big-size {
        font-size: 1.5rem; /* Deutlich kleinere Schrift für sehr kleine Geräte */
    }
}

.navbar-nav .nav-link {
    color: #fff !important;
}

.navbar-brand img {
    height: 90px;
    vertical-align: middle;
}

/* Header */
.header {
    background-image: url('bilder/header_guardians.jpg'); /* Hintergrundbild des Headers */
    background-size: cover;
    background-position: center;
    padding: 50px 0; /* Innenabstand des Headers anpassen */
}
.header-dienst {
    background-image: url('bilder/header_dienste.jpg'); /* Hintergrundbild des Headers */
    background-size: cover;
    background-position: center;
    padding: 50px 0; /* Innenabstand des Headers anpassen */
}
.header-anbau {
    background-image: url('bilder/header_anbau.jpg'); /* Hintergrundbild des Headers */
    background-size: cover;
    background-position: center;
    padding: 50px 0; /* Innenabstand des Headers anpassen */
}
.transparent-bg {
    background-color: rgba(91, 44, 72, 0.7); /* Transparenter Hintergrund */
    padding: 20px; /* Innenabstand */
    border-radius: 12px; /* Abgerundete Ecken */
    color: #fff; /* Textfarbe */
	margin-bottom: 25px;
}
.header-text {
    background-color: rgba(91, 44, 72, 0.7); /* Transparenter Hintergrund des Textes */
    padding: 20px; /* Innenabstand des Textes anpassen */
    border-radius: 12px; /* Abgerundete Ecken */
}

.header-text h2 {
    color: #fff; /* Textfarbe des Headers */
}

h1 {
    font-weight: bold;
}

h2 {
    font-weight: medium;
}
.btn-primary {
    background-color: #af1745; /* Updated button color */
    border-color: #780226; /* Updated border color */
    color: #4e91b0; /* Textfarbe */
}

.btn-primary:hover {
    background-color: #780226; /* Farbe beim Hovern */
    border-color: #af1745;
    color: #4e91b0; /* Textfarbe */
}
/* Formular-Stile */
.form-control-feedback {
    position: absolute;
    right: 10px;
    top: calc(50% - 10px);
}

.list-inline-item {
    color: #fff;
}

a:link {
    color: #fff; /* Farbe für Links, die noch nicht besucht wurden */
}

a:visited {
    color: #bf778e; /* Farbe für Links, die bereits besucht wurden */
}

a:hover {
    color: #609975; /* Farbe für Links beim Hovern */
}

a:active {
    color: #4b3d68; /* Farbe für Links im Moment des Klicks */
}

a:focus {
    outline: none; /* Entfernt den Fokus-Umrandung */
    color: #fff; /* Farbe für fokussierte Links */
}

a {
    transition: color 0.3s ease;
}

.card-preis {
    font-weight: 500;
    font-size: 18px;
}

img.img-fluid {
    max-height: 600px; /* oder eine andere passende Höhe */
    object-fit: cover; /* Dies stellt sicher, dass das Bild seine Proportionen beibehält, auch wenn es beschnitten wird */
}
/* Footer-Stile */
footer {
    background-color: #1f0d30;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}