/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

:root {
  /*========== Variables Light theme ==========*/
  --first-color: #069C54;
  --first-color-alt: #048654;
  --title-color: #393939;
  --text-color: #707070;
  --text-color-light: #A6A6A6;
  --body-color: #FBFEFD;
  --container-color: #FFFFFF;

  /*========== Font and typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 2.25rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Margenes ==========*/
  --mb-1: .5rem;
  --mb-2: 1rem;
  --mb-3: 1.5rem;
  --mb-4: 2rem;
  --mb-5: 2.5rem;
  --mb-6: 3rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Variables Dark theme ==========*/
body.dark-theme {
  --title-color: #F1F3F2;
  --text-color: #C7D1CC;
  --body-color: #1D2521;
  --container-color: #27302C;
}

body {
  background-color: var(--body-color); /* Standardfarbe für Hintergrund */
  color: var(--text-color); /* Standardfarbe für Text */
}

@media screen and (min-width: 768px) {
  :root {
    --biggest-font-size: 4rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/* Media Query für größere Geräte (ab 769px), z.B. Tablets im Querformat und Desktops */
@media screen and (min-width: 769px) {
  .nav__menu {
    position: static; /* Menü ist immer sichtbar und nicht fixiert */
    height: auto;
    background-color: transparent; /* Hintergrundfarbe entfernen, da kein Burger-Menü */
    padding: 0;
    box-shadow: none; /* Entferne den Schatten */
    border-radius: 0; /* Keine abgerundeten Ecken */
  }

  /* Schließ-Button (X) auf großen Geräten ausblenden */
  .close-menu {
    display: none;
  }

  /* Hamburger-Icon auf großen Geräten ausblenden, da es nur für mobile Geräte ist */
  .nav__toggle {
    display: none;
  }
}



/* Schließ-Button (X) - nur sichtbar auf mobilen Geräten */
.close-menu {
  position: absolute;
  top: 3rem; /* Positionierung anpassen */
  left: 1rem;
  font-size: 2rem;
  color: var(--text-color);
  cursor: pointer;
  display: none; /* Standardmäßig ausblenden */
}

/* Auf mobilen Geräten (max. 768px) sichtbar */
@media (max-width: 768px) {
  .close-menu {
    display: block; /* Nur auf mobilen Geräten anzeigen */
  }
  /* Hamburger-Icon auf mobilen Geräten sichtbar */
  .nav__toggle {
    display: block;
  }
}




/*========== BASE ==========*/
*, ::before, ::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/*========== Popup Styles ==========*/
body.dark-theme .popup-content {
  background-color: #2A2A2A; /* Dunkler Hintergrund für das Popup */
  color: #FFFFFF; /* Weiße Schriftfarbe */
}

body.dark-theme .popup-text h2 {
  color: #FFFFFF; /* Weiße Farbe für die Überschrift */
}

body.dark-theme .popup-text p,
body.dark-theme .popup-text ul li {
  color: #C7D1CC; /* Helle Farbe für den Fließtext und Listenpunkte */
}

body.dark-theme .elementor-progress-text {
  color: #FFFFFF; /* Weiße Farbe für den Text in den Progressbars */
}

/*========== Button Dark/Light ==========*/
.change-theme {
  position: absolute;
  right: 1rem;
  top: 1.8rem;
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
}

body{
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
  line-height: 1.6;
}

h1,h2,h3,p,ul{
  margin: 0;
}


ul{
  padding: 0;
  list-style: none;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
}

/*========== CLASS CSS ==========*/
.section{
  padding: 4rem 0 2rem;
}

.section-title, .section-subtitle{
  text-align: center;
}

.section-title{
  font-size: var(--h1-font-size);
  color: var(--title-color);
  margin-bottom: var(--mb-3);
}

.section-title.about__initial {
    position: relative; /* Notwendig, um den z-index anzuwenden */
    z-index: 1; /* Negativer Wert für die Hintergrundpositionierung */
}

.section-subtitle{
  display: block;
  color: var(--first-color);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-1);
}

/*========== LAYOUT ==========*/
.bd-container{
  max-width: 960px;
  width: calc(100% - 2rem);
  margin-left: var(--mb-2);
  margin-right: var(--mb-2);
}

.bd-grid{
  display: grid;
  gap: 1.5rem;
}

.l-header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--body-color);
}

/*========== NAV ==========*/
.nav {
  max-width: 1024px;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Hamburger-Striche (Menü-Icon) */
.nav__toggle {
  font-size: 1.3rem;
  cursor: pointer;
  position: absolute;
  left: 15px;
  top: 5px;
  display: block; /* Zeige die Hamburger-Striche auf mobilen Geräten */
}

@media screen and (max-width: 768px) {
  .nav__menu {
    position: fixed;
    top: -100vh; /* Setze das Menü zu Beginn aus dem sichtbaren Bereich */
    left: 0;
    width: 100%;
    height: 100vh; /* Setze die Höhe auf 100% des Viewports */
    padding: 2rem 0 1.5rem; /* Größeres Padding für mehr Höhe */
    text-align: center;
    background-color: var(--body-color);
    transition: top 0.4s; /* Verändert nur die top-Position */
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    border-radius: 0 0 1rem 1rem;
    z-index: var(--z-fixed);

    padding-top: 3rem; /* Abstand nach oben im Burger-Menü */
  }


  .nav__menu .nav__item {
    margin-top: 1.5rem; /* Abstand nach oben zwischen den Links */
    margin-bottom: 1.5rem; /* Abstand nach unten zwischen den Links */
  }


  /* Wenn das Menü angezeigt wird */
  .nav__menu.show-menu {
    top: 0; /* Setze das Menü auf die sichtbare Position */
  }

  /* Schließbutton sichtbar auf mobilen Geräten */
  .nav__toggle-close {
    display: block; /* Zeige den Schließbutton */
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 5px;
  }
}


/* Media Query für kleinere Geräte wie iPhone SE */
@media (max-width: 375px) {
  body {
    margin-top: 3rem; /* Verschiebt die ganze Seite nach unten und schafft Platz für das Menü */
  }

  .nav__menu {
    margin-top: 1rem; /* Optional: Falls du das Menü noch weiter anpassen möchtest */
  }

  /* Optional: Abstand nach unten für das Menü */
  .nav__menu .nav__item {
    margin-top: 1rem;
  }
}





/* Abstand zum oberen Rand, wenn das Menü angezeigt wird */
.show-menu {
  top: 70px; /* Anpassbare Höhe - weiter entfernt vom oberen Rand */
}

.nav__item {
  margin-bottom: var(--mb-2);
}

/* Größere Schrift im Menü */
.nav__link, .nav__logo {
  color: var(--text-color);
  font-weight: var(--font-medium);
  font-size: 1.2rem; /* Schriftgröße erhöhen */
}

.nav__toggle{
  color: var(--text-color);
  font-weight: var(--font-medium);
  font-size: 1.7rem; /* Schriftgröße erhöhen */
}

.nav__logo:hover {
  color: var(--first-color);
}

.nav__link {
  transition: .3s;
}

.nav__link:hover {
  color: var(--first-color);
  font-size: 1.25rem; /* Optional: Schrift leicht vergrößern beim Hover */
}

/* Schließbutton nur sichtbar auf mobilen Geräten */
.nav__toggle-close {
  font-size: 1.5rem;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 5px;
  display: none; /* Standardmäßig ausgeblendet */
}

/* Show menu */
.show-menu {
  top: var(--header-height);
}


/* Active menu */
.active-link {
  color: var(--first-color);
}

/* Change background header */
.scroll-header{
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

/* Scroll top */
.scrolltop{
  position: fixed;
  left: 20px;
  bottom: -20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .3rem;
  background: rgba(6,156,84,.5);
  border-radius: .4rem;
  z-index: var(--z-tooltip);
  transition: .4s;
  visibility: hidden;
}

.scrolltop:hover{
  background-color: var(--first-color-alt);
}

.scrolltop__icon{
  font-size: 1.8rem;
  color: var(--body-color);
}

/* Show scrolltop */
.show-scroll{
  visibility: visible;
  bottom: 1.5rem;
}

/* Standardanzeige des LinkedIn-Icons */
.footer__social {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Animation für das Ein- und Ausblenden */
}

/* Standard-Abstand für die About-Sektion */
#about {
  margin-top: 0; /* Kein Abstand in der normalen Ansicht */
  transition: margin-top 0.4s ease; /* Übergang für eine sanfte Verschiebung */
}

/* Wenn das Popup angezeigt wird, Abstand hinzufügen */
body.popup-open #about {
  margin-top: 250px; /* Abstand für das Popup */
}


/* Nur für mobile Geräte */
@media (max-width: 768px) {
  .nav__toggle-close {
    position: absolute;
    top: 10px; /* Abstände nach Bedarf anpassen */
    right: 10px; /* Abstände nach Bedarf anpassen */
    font-size: 2rem; /* Größer machen für bessere Sichtbarkeit */
  }
}

/* Popup-Einstellungen */
.popup {
  position: fixed;
  z-index: 100000; /* Noch höherer z-index für das Popup */
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}


/* LinkedIn-Icon im Menü ausblenden */
.nav__menu.show-menu .footer__social {
  display: none; /* Versteckt das LinkedIn-Icon im Menü */
}

/* Versteckt das LinkedIn-Icon im normalen Menü und beim Burger-Menü für mobile Geräte */
@media (max-width: 768px) {
  .footer__social {
    opacity: 0; /* Versteckt das Icon */
    visibility: hidden; /* Macht das Icon unsichtbar */
  }

  /* Falls du es auch im Burger-Menü verstecken möchtest */
  .nav__menu.show-menu .footer__social {
    opacity: 0; /* Versteckt das LinkedIn-Icon, wenn das Burger-Menü geöffnet ist */
    visibility: hidden; /* Verhindert, dass es während der Animation sichtbar wird */
  }
}


.popup-content {
  background-color: #fff;
  padding: 20px;
  border: none;
  width: 70%;
  max-width: 800px;
  height: auto;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}


/* Sicherstellen, dass #about-Abschnitt hinter dem Popup bleibt */
#about {
  position: relative;
  z-index: 1; /* Niedrigerer z-index für Hintergrundinhalt */
}


/* Für Tablets (Quer- und Hochformat) */
@media (max-width: 1024px) {
  .popup-content {
    width: 90%; /* Breitere Darstellung auf Tablets */
    padding: 20px;
    max-width: none; /* Keine Einschränkung der maximalen Breite */
  }
}

/* Für Mobilgeräte (Smartphones, Quer- und Hochformat) */
@media (max-width: 768px) {
  .popup-content {
    width: 95%; /* Fast volle Breite auf Smartphones */
    padding: 15px;
    max-width: none; /* Keine Einschränkung der maximalen Breite */
    margin: 0 10px; /* Leichter Abstand vom Rand für Mobilgeräte */
  }
}





.contact__form {
  margin-top: 40px; /* Abstand nach oben zum Inhalt */
}

/* Mobile Ansicht */
@media (max-width: 768px) {  /* Für Bildschirme mit max. 768px Breite (Handys) */
  .contact__form {
    margin-top: 20px;      /* Kleinerer Abstand nach oben auf Handys */
    width: 100%;           /* Formular nimmt die gesamte Breite ein */
    padding: 10px;         /* Kleinere Innenabstände auf Handys */
    margin-left: 0;        /* Formular ganz links ausrichten */
    margin-right: 0;       /* Entfernt den rechten Abstand */
  }
}


.form__group {
  margin-bottom: 20px; /* Abstand zwischen den Eingabefeldern */
}

.form__group.two-columns {
  display: flex; /* Flexbox für zwei Spalten */
  gap: 20px; /* Abstand zwischen den Spalten */
}

.form__group.full-width {
  width: 100%; /* Volle Breite für Firma und Nachricht */
}



/* Mobile Ansicht */
@media (max-width: 768px) {
  .contact__form {
    padding: 5px; /* Weniger Innenabstand auf mobilen Geräten */
    max-width: 100%; /* Maximale Breite des Formulars auf Handys */
  }

  /* Form group mit zwei Spalten nebeneinander */
  .form__group.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich breite Spalten nebeneinander */
    gap: 5px; /* Etwas mehr Abstand zwischen den Spalten */
    width:100%; /* Erhöhe die Breite der zwei Spalten zusammen auf 90% */
  }

  .form__input {
    font-size: 12px; /* Kleinere Schriftgröße auf Handys */
    padding: 5px; /* Weniger Innenabstand auf Handys */
    width: 100%; /* Eingabefelder weiterhin 100% breit innerhalb des Containers */
  }

  .form__textarea {
    height: 60px; /* Kleinere Höhe für das Textarea auf Handys */
    width: 100%; /* Textarea weiterhin 100% breit */
    max-width: 100%; /* Maximale Breite auf 100% setzen */
  }

  .button {
    width: 85%; /* Schaltfläche nimmt 85% der Breite ein */
    padding: 5px 10px; /* Kleinere Schaltflächenpolsterung */
  }
}











.impressum-content {
  display: none; /* Standardmäßig versteckt */
  padding: 20px; /* Innenabstand */
  width: calc(100vw - 30px); /* Volle Breite minus ein bisschen Abstand */
  left: 0; /* 20px vom linken Rand */
  bottom: 0; /* Kommt am unteren Rand der Seite */
  position: relative;
  box-sizing: border-box; /* Padding in die Breite einbeziehen */
  z-index: 1000; /* Über anderen Elementen sichtbar */
}

.impressum-title {
  font-size: 24px; /* Schriftgröße für den Titel */
  margin-bottom: 15px; /* Abstand zum folgenden Inhalt */
}

.impressum-text {
  max-width: 50%; /* Maximale Breite */
  line-height: 1.6; /* Zeilenhöhe für bessere Lesbarkeit */
}







.footer__content {
  padding: 20px;
  margin-bottom: 10px;
}

.footer__title {
  font-size: 1.5rem;
  color: #28c23e;
  margin-bottom: 10px;
}

.footer__link {
  color: #333;
  text-decoration: none;
}




.footer__copy {
  text-align: center;
  margin-top: 20px;
  position: fixed;
  left: 50%; /* Positioniere das Element in der Mitte des Bildschirms */
  transform: translateX(-50%); /* Zentriert das Element */
  font-size: 14px;
  color: #777;
  white-space: nowrap; /* Verhindert den Umbruch */
}

@media (max-width: 1024px) {
  .footer__copy {
    font-size: 13px; /* Kleinere Schriftgröße für Tablets */
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .footer__copy {
    font-size: 12px; /* Noch kleinere Schriftgröße für Handys */
    margin-top: 15px;
  }
}

/* Speziell für Desktop: weiter nach links verschieben */
@media (min-width: 1025px) {
  .footer__copy {
    left: 50%; /* Positionierung bleibt mittig */
    transform: translateX(-100%); /* Nur horizontale Verschiebung */
  }
}





.impressum-content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7); /* Halbtransparenter Hintergrund */
  color: white;
  padding: 20px;
  overflow-y: auto;
  display: none; /* Standardmäßig ausgeblendet */
  z-index: 1000;
}

.impressum-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-pin {
  width: 200px;
  height: 200px;
  margin-left: 0;
  cursor: pointer;
  object-fit: contain; /* Verhindert Verzerrungen */
}

.close-button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
}

.close-button:hover {
  background-color: #d32f2f;
}

.impressum-text {
  margin-top: 20px;
}

/* Styling für den Rest der Seite, um Platz zu schaffen, wenn das Impressum geöffnet ist */
body {
  padding-bottom: 50px;
}

.footer__copy {
  font-size: 14px;
  color: #777;
}

/* Für mobile Ansicht */
@media (max-width: 768px) {
  .impressum-content {
      padding: 10px;
  }
}


.footer__hidden {
  transform: translateY(100%); /* Verschiebt den Footer aus dem Sichtbereich */
  transition: transform 0.3s ease; /* Sanfte Übergangsanimation */
}





/* Link für das Impressum */
.impressum-link {
  color: var(--text-color); /* Linkfarbe an den normalen Text anpassen */
  text-decoration: none; /* Keine Unterstreichung */
  cursor: pointer; /* Zeigt, dass es klickbar ist */
}

/* Wenn der Link mit der Maus überfahren wird, passiert nichts */
.impressum-link:hover {
  color: var(--text-color); /* Keine Farbänderung beim Hover */
  text-decoration: none; /* Keine Unterstreichung beim Hover */
}

/* Wenn der Link angeklickt wird, bleibt die Farbe gleich */
.impressum-link:active {
  color: var(--text-color); /* Keine Farbänderung beim Klicken */
  text-decoration: none; /* Keine Unterstreichung beim Klicken */
}





.form__input {
  flex: 1; /* Gleichmäßige Breite der Eingabefelder */
  padding: 12px; /* Innenabstand */
  border: 1px solid #ccc; /* Rand für die Eingabefelder */
  border-radius: 5px; /* Abgerundete Ecken */
  font-size: 16px; /* Schriftgröße */
  transition: border-color 0.3s; /* Übergang für Randfarbe */
}

.form__input:focus {
  border-color: #28c23e; /* Farbe beim Fokussieren */
  outline: none; /* Standard-Umrandung entfernen */
}

.form__textarea {
  height: 150px; /* Höhe für das Nachrichtenfeld */
  resize: none; /* Größenänderung deaktivieren */
  width: 100%; /* Breite auf 100% setzen */
}


.button {
  background-color: #28c23e; /* Hintergrundfarbe */
  color: white; /* Schriftfarbe */
  border: none; /* Kein Rand */
  padding: 12px 20px; /* Innenabstand */
  border-radius: 5px; /* Abgerundete Ecken */
  cursor: pointer; /* Hand-Cursor */
  font-size: 16px; /* Schriftgröße */
  transition: background-color 0.3s; /* Sanfter Übergang für Hintergrundfarbe */
}


/* Mobile Ansicht */
@media (max-width: 768px) {
  .button {
  padding: 12px 20px; /* Innenabstand */
    font-size: 14px; /* Kleinere Schriftgröße für mobile Geräte */
    width: 30%;
  }
}

.button:hover {
  background-color: #219c31; /* Dunklere Farbe beim Überfahren */
}

.contact__description {
  margin-bottom: 20px; /* Abstand nach unten zur Beschreibung */
}

/* Mobile Ansicht */
@media (max-width: 768px) {  /* Für Bildschirme mit max. 768px Breite (Handys) */
  .contact__description {
    text-align: center;  /* Text auf Handys mittig ausrichten */
    padding-left: 10%; /* Text ein wenig nach rechts verschieben (kann angepasst werden) */
    padding-right: 10%; /* Falls du auch die rechte Seite ein wenig anpassen möchtest */
  }
}



.popup-inner {
  display: flex; /* Flexbox für die Anordnung */
  justify-content: space-between; /* Gleichmäßiger Abstand zwischen den Elementen */
  align-items: flex-start; /* Elemente am oberen Rand ausrichten */
  height: auto; /* Automatische Höhe basierend auf Inhalt */
}

.popup-text {
  width: 100%;
}

.progress-container {
  width: 25%; /* Progressbar-Bereich nimmt 25% des verfügbaren Platzes ein */
  margin-top: 20px; /* Abstand oben für die Progressbars */
  margin-left: 20px; /* Abstand zwischen Text und Progressbars */
  text-align: right; /* Text und Progressbars nach rechts ausrichten */
}

.close {
  color: #aaa;
  float: right;
  font-size: 36px;
  font-weight: bold;

  margin-top: -2%; /* Abstand nach oben vom Text */
}

.close:hover,
.close:focus {
  color: greenyellow;
  text-decoration: none;
  cursor: pointer;
}

.elementor-progress-wrapper {
  background-color: #eee; /* Hintergrund der Progressbar */
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden; /* Damit der Fortschritt nicht überläuft */
}

.elementor-progress-bar {
  background-color: #5cb85c; /* Standardfarbe für den Fortschritt */
  height: 30px; /* Höhe der Progressbar */
  line-height: 30px; /* Vertikale Ausrichtung des Texts */
  color: white; /* Textfarbe innerhalb der Progressbar */
  text-align: center; /* Text zentrieren */
  transition: width 1s ease-in-out; /* Animation für den Fortschritt */
}



.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10; /* Sicherstellen, dass der Footer über anderen Inhalten liegt */
}


/*========== HOME ==========*/
.home__container{
  height: calc(100vh - var(--header-height));
  align-content: center;
}

.home__title {
  font-size: calc(var(--biggest-font-size) * 0.8); /* Größe reduzieren */
  line-height: 1.2; /* Zeilenhöhe anpassen für mehr Enge */
  color: var(--first-color);
  margin-bottom: var(--mb-1);
}


.home__subtitle {
  font-size: calc(var(--h1-font-size) * 0.8); /* Größe reduzieren */
  line-height: 1.2; /* Zeilenhöhe anpassen für mehr Enge */
  color: var(--title-color);
  margin-bottom: var(--mb-4);
}

.home__img {
  width: 300px;
  justify-self: center;
  z-index: -1; /* Setze auf einen positiven Wert */
}

/*========== BUTTONS ==========*/
.button{
  display: inline-block;
  background-color: var(--first-color);
  color: #FFF;
  padding: .75rem 1rem;
  border-radius: .5rem;
  transition: .3s;
}

.button:hover{
  background-color: var(--first-color-alt);
}

/*========== ABOUT ==========*/
.about__data {
  text-align: center;
  width: 200%; /* Erhöhe diesen Wert nach Bedarf */
  max-width: 900px; /* Erhöhe die maximale Breite */
  padding: 20px; /* Optional: Padding hinzufügen */
}

.about__description{
  margin-bottom: var(--mb-3);
}

.about__img{
  width: 280px;
  border-radius: .5rem;
  justify-self: center;
}




/*========== SERVICES ==========*/
.services__container {
  display: grid; /* Grid-Layout aktivieren */
  row-gap: 2.5rem;
  column-gap: 2.5rem; /* Abstand zwischen den Spalten */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Anpassung für größere Bilder */
}

@media (max-width: 768px) {
  .services__container {
    grid-template-columns: 1fr; /* Ein Bild pro Zeile auf kleinen Bildschirmen */
    justify-items: center; /* Zentriert die Bilder horizontal */
  }

  .service__item {
    max-width: 350px; /* Stellt sicher, dass die Bilder auf Handys nicht zu groß werden */
  }
}

/* Für kleine Handys (z.B. iPhone SE) */
@media (max-width: 375px) {
  .services__container {
    grid-template-columns: 1fr; /* Ein Bild pro Zeile */
    justify-items: center; /* Zentriert die Bilder horizontal */
  }


  
  .service__item {
    max-width: 280px; /* Setze eine maximale Breite für kleine Handys */
  }

  .service__item img {
    max-width: 100%; /* Stellt sicher, dass die Bilder innerhalb des Containers bleiben */
  }
}

/* Für größere Tablets und iPads (max-width: 1024px) */
@media (max-width: 1024px) {
  .services__container {
    grid-template-columns: repeat(2, 1fr); /* Zwei Bilder nebeneinander für Tablets */
    justify-items: center; /* Zentriert die Bilder horizontal */
  }

  .service__item {
    max-width: 400px; /* Größere Breite für iPads und größere Geräte */
  }

  .service__item img {
    max-width: 100%; /* Stellt sicher, dass die Bilder innerhalb des Containers bleiben */
  }
}


.service__item {
  position: relative;
  overflow: hidden;
}

.service__item img {
  width: 100%;
  height: auto; /* Bild passt sich der Containergröße an */
  transition: transform 0.3s ease; /* Weicher Übergang beim Hovern */
}

.service__item:hover img {
  transform: scale(1.1); /* Zoom-Effekt beim Hovern */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Abdunkelung */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease; /* Überblendung */
}

.service__item:hover .overlay {
  opacity: 1;
}

.overlay p {
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}



/*========== MENU ==========*/
.menu__container{
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
}

.menu__content{
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--container-color);
  border-radius: .5rem;
  box-shadow: 0 2px 4px rgba(3,74,40,.15);
  padding: .75rem;
}

.menu__img{
  width: 100px;
  align-self: center;
  margin-bottom: var(--mb-2);
}

.menu__name, .menu__preci{
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}

.menu__name{
  font-size: var(--normal-font-size);
}

.menu__detail, .menu__preci{
  font-size: var(--small-font-size);
}

.menu__detail{
  margin-bottom: var(--mb-1);
}

.menu__button{
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  padding: .625rem .813rem;
  border-radius: .5rem 0 .5rem 0;
}

/*========== APP ==========*/
.app__data{
  text-align: center;
}

.app__description{
  margin-bottom: var(--mb-5);
}

.app__stores{
  margin-bottom: var(--mb-4);
}

.app__store{
  width: 120px;
  margin: 0 var(--mb-1);
}

.app__img{
  width: 230px;
  justify-self: center;
}

/*========== CONTACT ==========*/
.contact__container{
  text-align: center;
}

.contact__description{
  margin-bottom: var(--mb-3);
}

/*========== FOOTER ==========*/
.footer__container{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  row-gap: 2rem;
}

.footer__logo{
  font-size: var(--h3-font-size);
  color: var(--first-color);
  font-weight: var(--font-semi-bold);
}















.footer__description{
  display: block;
  font-size: var(--small-font-size);
  margin: .25rem 0 var(--mb-3);
}

/* Standardfarbe für den Lightmode */
.footer__description {
    color: #333; /* Setzt die Farbe auf dunkelgrau für den Lightmode */
}

/* Farbe für den Darkmode */
.footer__description.dark-mode {
    color: white; /* Setzt die Farbe auf weiß für den Darkmode */
}

.footer__social{
  font-size: 1.5rem;
  color: var(--title-color);
  margin-right: var(--mb-2);
  border: black solid 0.5px;
  border-radius: 50%;
  width: 30px; /* Breite des Icons */
  height: 30px; /* Höhe des Icons */
  display: flex; /* Flexbox, um das Icon zu zentrieren */
  align-items: center; /* Vertikale Zentrierung */
  justify-content: center;

}

/* Darkmode */
.dark-theme .footer__social {
  border: 0.5px solid white; /* Weißer Border im Darkmode */
}

.dark-theme .footer__social i {
  color: white; /* Iconfarbe im Darkmode */
}

.footer__title{
  font-size: var(--h2-font-size);
  color: var(--title-color);
  margin-bottom: var(--mb-2);
}

.footer__link{
  display: inline-block;
  color: var(--text-color);
  margin-bottom: var(--mb-1);
}

.footer__link:hover{
  color: var(--first-color);
}

.footer__copy{
  text-align: center;
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  margin-top: 3.5rem;
}

/*========== MEDIA QUERIES ==========*/
/* Standard-Stile für kleinere Bildschirme */
.about__data {
  text-align: center;
  width: 100%; /* Volle Breite auf kleinen Geräten */
  max-width: 900px; /* Maximale Breite auf kleinen Geräten */
  padding: 20px; /* Padding für Abstand */

  margin-left: 2%; /* Verschiebt den Text nach rechts */
}




.about__img-container {
  flex-shrink: 0; /* Verhindert, dass das Bild zu klein wird */
  display: flex;
  justify-content: center;
  align-items: center;
}

.about__img-big {
  max-width: 100%; /* Damit das große Bild die Container-Breite nicht überschreitet */
  height: auto;
  margin: 0 auto 3rem; /* Zentriert das große Bild und gibt ihm Abstand nach unten */
  transform: translateX(25%); /* Verschiebt das Bild nach rechts */
}

/* Mobile Ansicht */
@media (max-width: 768px) {  /* Für Bildschirme mit max. 768px Breite (Handys) */
  .about__img-big {
    max-width: 100%;  /* Bild nimmt 100% der Container-Breite ein */
    transform: translateX(2%);  /* Bild wird auf Handys um 10% nach rechts verschoben */
  }
}

/* Kleineres Bild im Textbereich */
.about__img-left {
  max-width: 60px; /* Kleinere Breite des Bildes */
  height: auto; /* Höhe bleibt proportional zur Breite */
}

/* Media Query für größere Bildschirme */
@media screen and (min-width: 768px) {
  .home__container,
  .about__container,
  .app__container {
    grid-template-columns: repeat(2, 1fr); /* Zwei Spalten auf größeren Bildschirmen */
    align-items: center;
  }

  .about__data {
    width: 100%; /* Volle Breite */
    max-width: 1200px; /* Erhöhe die maximale Breite für größere Bildschirme */
    padding: 20px; /* Optional: Padding beibehalten */
  }

  .about__img, .app__img {
    width: 100%;
    max-width: 500px; /* Maximalbreite des Bildes auf größeren Bildschirmen */
    order: -1; /* Bild wird nach dem Text angeordnet */
  }

  /* Falls du den Text weiter anpassen möchtest */
  .about__description {
    margin-bottom: var(--mb-3); /* Abstand nach unten */
  }
}

/* Noch größere Bildschirme, wie PC */
@media screen and (min-width: 1024px) {
  .about__data {
    max-width: 1500px; /* Für sehr große Bildschirme */
  }

  .about__img, .app__img {
    max-width: 600px; /* Bildgröße weiter anpassen */
  }





  .contact__container{
    grid-template-columns: 1.75fr 1fr;
    align-items: center;
  }
  .contact__button{
    justify-self: center;
  }
}

@media screen and (min-width: 768px){
  body{
    margin: 0;
  }

  .section{
    padding-top: 8rem;
  }

  .nav{
    height: calc(var(--header-height) + 1.5rem);
  }
  .nav__list{
    display: flex;
  }
  .nav__item{
    margin-left: var(--mb-5);
    margin-bottom: 0;
  }
  .nav__toggle{
    display: none;
  }

  .change-theme{
    position: initial;
    margin-left: var(--mb-2);
    font-size: 1.3rem; 
    margin-top: 0.3rem; /* Abstand nach unten erhöhen */
  }

  .home__container{
    height: 100vh;
    justify-items: center;
  }

  .services__container,
  .menu__container{
    margin-top: var(--mb-6);
  }

  .menu__container{
    grid-template-columns: repeat(3, 210px);
    column-gap: 4rem;
  }
  .menu__content{
    padding: 1.5rem;
  }
  .menu__img{
    width: 130px;
  }

  .app__store{
    margin: 0 var(--mb-1) 0 0;
  }
}

/* Sicherstellen, dass der Container des Buttons relativ positioniert ist */
.navbar { 
  position: relative; /* Dies sorgt dafür, dass der Button relativ zum Container positioniert wird */
}

/* Für mobile Geräte (z. B. unter 768px) */
@media (max-width: 768px) {
  .change-theme {
    position: absolute; /* Absolute Positionierung, relativ zum übergeordneten Container */
    left: 1rem; /* Schiebt den Button nach links */
    top: 1.8rem; /* Der Abstand von oben bleibt gleich */
    font-size: 1.3rem;
  }
}

@media screen and (min-width: 960px){
  .bd-container{
    margin-left: auto;
    margin-right: auto;
  }

  .home__img{
    width: 500px;
  }

  .about__container,
  .app__container{
    column-gap: 7rem;
  }
}

/* For tall screens on mobiles y desktop*/
@media screen and (min-height: 721px) {
    .home__container {
        height: 640px;
    }
}