body {
    background-color: #f8f9fa;
    font-family: Arial, sans-serif;
    position: relative;
    min-height: 100vh; /* Stellt sicher, dass der Body mindestens die Höhe des Viewports hat */
    padding-bottom: 60px; /* Platz für die Fußzeile */
}

/* Vergrößere Schriftgröße, Buttons und Eingabefelder für Bildschirmbreiten bis 992px */
@media (max-width: 992px) {
    body {
        font-size: 18px; /* Vergrößerte Schriftgröße für kleinere Bildschirme */
    }

    /*.btn {
        padding: 10px 25px; /* Vergrößertes Padding für Buttons */
        /*font-size: 1.2em; /* Vergrößerte Schriftgröße für Buttons */
      	/*margin-bottom: 10px;
      	width: auto;
    }*/

    .form-control {
        padding: 15px; /* Vergrößertes Padding für Eingabefelder */
        font-size: 1.2em; /* Vergrößerte Schriftgröße für Eingabefelder */
        border-radius: 8px; /* Vergrößerter Border-Radius für Eingabefelder */
    }
}

.jumbotron {
    background-color: #343a40;
    color: white;
    text-align: center;
}

.card {
    margin-bottom: 20px;
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.btn-primary {
    background-color: #007bff;
    border: none;
}

.btn-success {
    background-color: #28a745;
    border: none;
}

.mb-20 {
  margin-bottom: 10px;
  border: 2px solid #007bff;
  background-color: #343a40;
  border-radius: 5px;
  color: #007bff
}
/* Stil für die Buttons */
.btn {
    padding: 10px 20px; /* Standard Padding für größere Bildschirme */
    font-size: 1em; /* Standard Schriftgröße für größere Bildschirme */
    border-radius: 5px; /* Runden der Ecken */
}

/* Vergrößere Buttons für Bildschirmbreiten bis 992px */
@media (max-width: 992px) {
    .btn {
        padding: 15px 30px; /* Vergrößertes Padding für kleinere Bildschirme */
        font-size: 1.2em; /* Vergrößerte Schriftgröße für kleinere Bildschirme */
    }
}



/* Stellt sicher, dass die Karten in einem flexbox-Container enthalten sind */
.card-deck {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Abstand zwischen den Karten */
}

/* Macht alle Karten gleich hoch */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Stellt sicher, dass die Karten ihren Inhalt füllen */
.card-body {
    flex: 1; /* Macht den Card-Body flexibel und lässt ihn den verfügbaren Raum einnehmen */
}

/* Optional: Verhindert, dass der Card-Body zu groß wird */
/*.card-body {
    overflow: hidden;
}*/

.carousel-inner img {
    width: 100%;
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    /*object-fit: cover;  Beschneidet das Bild, um den Container auszufüllen */
}

.carousel {
    height: auto; /* Setze eine feste Höhe für das Carousel */
    overflow: hidden; /* Verhindert, dass Bilder außerhalb des Containers angezeigt werden */
}

.carousel-inner {
    height: 100%;
}

.carousel-item {
    height: 100%; /* Höhe auf 100% des Containers setzen */
}

.carousel-item img {
    max-height: 100%; /* Skaliert das Bild auf die Höhe des Containers */
    width: auto; /* Beibehaltung des Seitenverhältnisses */
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: white; /* Ändere die Farbe der Pfeile */
    background-size: 100%, 100%; /* Stelle sicher, dass die Pfeile die richtige Größe haben */
    width: 50px; /* Größe des Pfeils */
    height: 50px; /* Größe des Pfeils */
    border-radius: 50%; /* Optional: mache die Pfeile rund */
}

.carousel-control-prev-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D"http%3A//www.w3.org/2000/svg" fill%3D"black" viewBox%3D"0 0 8 8"%3E%3Cpath d%3D"M4.5 0l-4 4 4 4 1-1-3-3 3-3-1-1z"%3E%3C/path%3E%3C/svg%3E');
    /* Pfad für den linken Pfeil */
}

.carousel-control-next-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D"http%3A//www.w3.org/2000/svg" fill%3D"black" viewBox%3D"0 0 8 8"%3E%3Cpath d%3D"M3.5 0l4 4-4 4-1-1 3-3-3-3 1-1z"%3E%3C/path%3E%3C/svg%3E');
    /* Pfad für den rechten Pfeil */
}
/* Anpassungen für kleinere Bildschirme */
@media (max-width: 992px) {
    .card {
        margin-bottom: 20px;
        padding: 20px;
    }

    .card .carousel {
        height: 700px; /* Erhöhe die Höhe des Karussells */
    }

    .card .carousel img {
        width: 100%; /* Bild in voller Höhe des Karussells anzeigen */
      	height: auto;
        object-fit: contain; /* Bild vollständig anzeigen*/
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 10%; /* Steuerelemente größer machen */
        font-size: 1.5em; /* Schriftgröße erhöhen */
    }

  	.carousel-inner {
      width: 100%;
      height: auto;
  	}


  	.carousel-item {
      width: 100%;
      height: auto;
  	}

  	.carousel-item img {
    	width: 100%; /* Beibehaltung des Seitenverhältnisses */
      	height: auto;
      	max-height: 600px; /* Skaliert das Bild auf die Höhe des Containers */
    	object-fit: contain;
    	/*margin: 0 auto;
    	display: block;*/
	}

    .card-body {
        padding: 20px;
        font-size: 2.0em; /* Textgrößen innerhalb der Karte erhöhen */
    }

    .form-group .form-control {
        font-size: 1.5em; /* Dropdown und Input-Felder größer machen */
    }

    .input-group .btn {
        font-size: 1.5em; /* Größere Buttons für die Anzahlsteuerung */
        padding: 10px 20px;
    }

    .card-footer .btn {
        font-size: 2.2em; /* Größere Buttons in der Fußzeile */
        padding: 10px 20px;
    }
}

/* Neue Styles für die Fußzeile */
.footer-links {
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #f8f9fa; /* Hintergrundfarbe der Fußzeile */
    padding: 10px 0; /* Vertikales Padding */
}

.footer-links a {
    text-decoration: none;
    color: #007bff;
    margin: 0 15px;
    font-weight: bold;
}

.footer-links a:hover {
    text-decoration: underline;
}

@media (max-width: 992px) {
  .footer-links a {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .footer-links a {
    font-size: 20px;
  }
}

/* Responsive Design für kleinere Bildschirme */
@media (max-width: 768px) {
    .carousel {
        height: 200px; /* Kleinere Höhe für kleinere Bildschirme */
    }

    .section {
        flex-direction: column;
        text-align: center;
    }

    .text-container {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .section img {
        margin: 0;
        max-width: 80%; /* Optional: Vergrößern auf mobilen Geräten */
    }

  	.row .col-md-6 {
      flex: 0 0 100%;
      max-width: 100%;
  	}
}

@media (min-width: 769px) {
    .carousel {
        height: 300px; /* Größere Höhe für größere Bildschirme */
    }

      /* Standard Layout für größere Bildschirme */
    .row .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Styles für die Navigation */
.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #343a40;
    padding: 10px 20px;
    position: fixed; /* Fixiert die Menüleiste im Viewport */
    top: 0; /* Positioniert die Menüleiste am oberen Rand */
    left: 0; /* Stellt sicher, dass die Leiste links am Bildschirmrand beginnt */
    width: 100%; /* Breite über den gesamten Bildschirm */
    z-index: 1000; /* Stellt sicher, dass die Menüleiste über anderen Inhalten liegt */
  	box-sizing: border-box;
}

.menu a {
  color: white;
  padding: 10px;
  text-decoration: none;
}

.logo {
    /*position: fixed; /* Fixiert das Logo im Viewport */
    top: 20px; /* Abstand vom oberen Rand */
    right: 20px; /* Abstand vom rechten Rand */
    /*z-index: 1001; /* Stellt sicher, dass das Logo über anderen Inhalten liegt und auch über der Menüleiste */
    width: 200px; /* Passe die Breite des Logos nach Bedarf an */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    margin-bottom: 10px;
    margin-top: 10px;
}

.menu a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    font-size: 1.2rem;
}

.menu a:hover {
    text-decoration: underline;
}

/* Styles für den Haupt-Container */
.container {
    max-width: 1200px; /* Maximalbreite des Containers */
    margin: 0 auto; /* Zentriert den Container horizontal */
    padding: 0 20px; /* Verhindert, dass der Inhalt am Rand klebt */
}

/* Styles für die Willkommensnachricht */
.welcome {
    text-align: center;
    padding: 50px 20px;
}

.welcome h1 {
    font-size: 2.5rem;
    color: #343a40;
}

/* Flexbox Layout für Abschnitte */
.section {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Stellt sicher, dass Bild und Text den verfügbaren Platz gleichmäßig nutzen */
    padding: 50px;
    margin: 20px 0;
  	flex-wrap: wrap;
}

.section img {
    max-width: 40%;
    height: auto;
    margin: 0 20px;
    border-radius: 20px;
}

.text-container {
    flex: 1;
    max-width: 60%; /* Erhöht den maximalen Platz für Text */
}

/* Anordnung für rechte Ausrichtung */
.text-right {
    flex-direction: row; /* Korrigiert die Reihenfolge von Bild und Text */
    line-height: 1.5;
}

/* Anordnung für linke Ausrichtung */
.text-left {
    flex-direction: row;
    line-height: 1.5;
}

/* Responsive Styles für mobile Ansicht */
@media (max-width: 768px) {
    .text-right {
        flex-direction: column; /* Stapelt Bild und Text vertikal bei schmalen Bildschirmen */
        align-items: flex-start; /* Optional: Text und Bild am Anfang der Flexbox ausrichten */
    }
  	.text-left {
        flex-direction: row; /* Stapelt Bild und Text vertikal bei schmalen Bildschirmen */
        align-items: flex-start; /* Optional: Text und Bild am Anfang der Flexbox ausrichten */
    }

    .section img {
        max-width: 100%; /* Bild auf 100% der Breite des Containers setzen */
        margin: 0 0 20px 0; /* Abstand unten, um Platz zwischen Bild und Text zu schaffen */
    }

    .text-container {
        max-width: 100%; /* Textcontainer auf 100% der Breite des Containers setzen */
    }
}

/* Vergrößere Labels und Inputs für Bildschirmbreiten bis 992px */
@media (max-width: 992px) {
    .form-check-label {
        font-size: 1.2em; /* Vergrößerte Schriftgröße für Labels */
    }

    .form-check-input {
        width: 1.5em; /* Vergrößerte Breite für Checkboxen/Radiobuttons */
        height: 1.5em; /* Vergrößerte Höhe für Checkboxen/Radiobuttons */
    }
}

/* Erhöht die Schriftgröße und Höhe der Dropdown-Elemente */
.dropdown-menu {
    padding: 10px 0; /* Fügt Padding hinzu, um das Menü größer zu machen */
}

/* Schriftgröße für den Titel im Navbar */


/* Für den Titel in der Navbar */
.navbar .navbar-brand {
    font-size: 5.0rem !important; /* Größere Schriftgröße */
}


/* Ändert die Farbe der Links in der Navigationsleiste */
.navbar-nav .nav-link {
    color: #ffffff !important;  /* Beispiel für orange */
    font-size: 1.5rem; /* Erhöht die Schriftgröße der Navigationslinks */
}

/* Farbe des Dropdown-Icons ändern */
.navbar-nav .dropdown-toggle::after {
    color: #ffffff !important; /* Icon-Farbe auf orange setzen */
}

/* Bei Hover die Farbe ändern */
.navbar-nav .nav-link:hover {
    color: #007bff !important; /* Beispiel für Blau beim Hover */
}

/* Dropdown-Menü Einträge Farbe anpassen */
.dropdown-menu .dropdown-item {
    color: #000000 !important; /* Standardfarbe */
    font-size: 1.25rem; /* Schriftgröße erhöhen */
    padding: 10px 20px; /* Padding für mehr Platz */
}

/* Dropdown-Menü Einträge Hover-Farbe */
.dropdown-menu .dropdown-item:hover {
    color: #ffffff !important;
    background-color: #007bff !important; /* Hintergrundfarbe beim Hover */
}

.navbar-toggler {
    background-color: #ffffff; /* Beispiel für orange */
    width: 50px; /* Breite der Hamburger-Taste anpassen */
    height: 50px; /* Höhe der Hamburger-Taste anpassen */
}

/* Mobile Ansichten anpassen */
@media (max-width: 992px) { /* Für Bildschirme kleiner als 768px */
    .dropdown-menu {
        padding: 15px 0; /* Fügt mehr Padding hinzu */
    }

    .dropdown-menu .dropdown-item {
        font-size: 1.5rem; /* Größere Schriftgröße für mobile Geräte */
        padding: 15px 20px; /* Mehr Padding für größere Klickflächen */
    }
    /* Ändert die Farbe der Links in der Navigationsleiste */
    .navbar-nav .nav-link {
        color: #ffffff;  /* Beispiel für orange */
        font-size: 3.0rem; /* Erhöht die Schriftgröße der Navigationslinks */
    }
    /* Für den Titel in der Navbar */
    .navbar .navbar-brand {
        font-size: 5.0rem; /* Größere Schriftgröße */
    }
    .dropdown-menu .dropdown-item {
        font-size: 3.0rem; /* Schriftgröße erhöhen */
    }
    .navbar-toggler {
        width: 7.0rem; /* Breite der Hamburger-Taste anpassen */
        height: 7.0rem; /* Höhe der Hamburger-Taste anpassen */
    }
    /* Vergrößert die Hamburger-Linien */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' viewBox='0 0 40 40'%3E%3Cpath stroke='%23007acc' stroke-width='5' d='M 5 10 L 35 10 M 5 20 L 35 20 M 5 30 L 35 30' /%3E%3C/svg%3E");
        width: 60px; /* Breite der Hamburger-Linien */
        height: 60px; /* Höhe der Hamburger-Linien */
    }

}