/* Custom page CSS
-------------------------------------------------- */

/* Beispiel: Ändere die primäre Farbe zu Rot */
:root {
  --primary-color: #ff007b; /* Setze die gewünschte Farbe hier ein */
}

/* Aktualisiere die Bootstrap primary Klasse mit der benutzerdefinierten Farbe */
.btn-primary {
  background-color: var(--primary-color) !important;;
  border-color: var(--primary-color) !important;;
}

.btn-sprache {
  background-color: white !important;;
  border-color: white !important;;
  color: var(--primary-color) !important;;
}

.btn-menu {
  background-color: white !important;;
  border-color: white !important;;
  color: var(--primary-color) !important;;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: white !important;;
  color: var(--primary-color) !important;;
  border-color: var(--primary-color) !important;;
}

body {
  font-family: 'Manrope', sans-serif;
    font-weight: 300; /* Light-Gewicht */
}

h1, h2, h3, h4, h5 {
  font-family: 'Manrope', sans-serif;
    font-weight: 800; /* Light-Gewicht */
}


h1{font-size:calc(1.7rem + 1.4vw);
color: var(--primary-color)}

h2{font-size:calc(1.275rem + .3vw);}

h3{font-size:1.25rem}

h4{font-size:1rem}
h5{font-size:0.9rem}
h6{font-size:0.8rem}


a {
  color: #ff007b;
}

header {
  margin-top: '0'px; /* Verändern Sie den Wert nach Bedarf */

}

main {
  margin-top: '0'px; /* Verändern Sie den Wert nach Bedarf */
}

main > .container {
  padding: 30px 15px 0;
}

.socialmediamenu {
  text-decoration: none;
}

.footer {
  background-image: url('../img/fuss.png'); /* Ersetze dies durch den Pfad zu deinem Bild */
  background-size: cover;
  background-color: white; /* Hintergrundfarbe auf Weiß setzen */

  height: 130px; /* Anpassen Sie die Höhe nach Bedarf */
  text-align: left; /* Rechtsbündig ausrichten */
  color: white; /* Textfarbe auf Weiß setzen */
  display: flex;
      align-items: flex-end;
}

.primary-custom {
  background-color: #ff007b; /* Deine gewünschte Farbe im Hex-Format */
  border-color: #ff0000; /* Falls notwendig, ändere auch die Border-Farbe */
  color: #ff007b; /* Falls notwendig, ändere auch die Text-Farbe */
}

.navbar-toggler {
    border: none;
    /* Oder eine andere Stildefinition für den Fokus-Zustand */
}

.border-white {
  border: 2px solid white;
}

.border-black {
  border: 2px solid black;
}

#kopfimg {
  width: 100vw;
  height: 0px; /* Fixe Höhe nach Bedarf anpassen */
  object-fit: fill;
  display: block;
  margin: 0 auto;
}

#adressemenu {
  position: absolute;
  bottom: 0;
  width: 100%
}

.img-cover {
  object-fit: cover;
  /* Optional: Setze die Höhe, um das gewünschte Seitenverhältnis beizubehalten */
  height: 250px;
  width: 100%;
}

.border-black {
  border: 1px solid black;
}

.btn-sothi {
  background-color: white; /* Deine gewünschte Farbe im Hex-Format */
  border-color: #ff007b; /* Falls notwendig, ändere auch die Border-Farbe */
  color: #ff007b; /* Falls notwendig, ändere auch die Text-Farbe */
}

.btn-sothi:hover {
  background-color: #ff007b; /* Deine gewünschte Farbe im Hex-Format */
  border-color: #ff007b; /* Falls notwendig, ändere auch die Border-Farbe */
  color: white; /* Falls notwendig, ändere auch die Text-Farbe */
}

/* Standard size for larger screens */
.logo {
    width: 250px;
    height: auto;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .logo {
        width: 200px;
        height: auto;
    }
}

@media (max-width: 576px) {
    .logo {
        width: 180px;
        height: auto;
    }
}