.feedback {
  width: 100%;
  height: 40vh;
  min-height: 300px;
  margin-top: 10vh;
}
/* Wrapper */
.feedback-wrapper {
  position: relative;
  max-width: 70%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

/* Sichtbarer Bereich */
.feedback-viewport {
  min-height: 80%;
  overflow: hidden;
}

/* Track (wird verschoben) */
.feedback-track {
  display: flex;
  min-height: 100%;
  transition: transform 0.5s ease;
}

/* Box */
.feedback-box {
  min-width: 90%;
  background: white;
  padding: 32px 0;
  margin: 16px 5%;

  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
}

/* Pfeile */
.feedback-arrow {
  background: none;
  border: none;
  font-size: 40px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.4);
  padding: 10px;
  transition: color 0.3s ease;
  z-index: 100;
}

.feedback-arrow:hover {
  color: chocolate;
}

/* Text */
.feedback-box p {
  font-family: "DroidSans", sans-serif;
  line-height: 1.6;
  padding: 0 16px;
}

.feedback-box span {
  font-family: "DroidSans", sans-serif;
  display: block;
  margin-top: 16px ;
  font-weight: bold;
  
}
.feedback-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 8px rgba(0, 0, 0, 0.12);
}

/* Media Query für mobile Geräte (max-width: 768px) */
@media (max-width: 768px) {

  /* 1. Navigation: Umstellung auf Stapel oder Scrollbar */
  nav {
    flex-direction: column;
    padding: 10px;
  }

  .Logo {
    height: 7vh; /* Etwas kleiner am Handy */
    margin-bottom: 10px;
  }

  .nav-links {
    width: 100%;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Falls zu viele Links, brechen sie um */
  }

  .nav-links a {
    font-size: 14px;
    margin-left: 5px;
  }

  /* Submenüs am Handy oft schwierig: Hier vereinfacht */
  .submenu {
    position: static; /* Untereinander statt schwebend */
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    display: none; /* Standardmäßig aus, oder man lässt sie weg */
  }

  /* 2. Überschriften anpassen */
  h1 {
    margin-left: 16px; /* Den großen Desktop-Abstand entfernen */
    font-size: 1.5rem;
    text-align: center;
  }

  /* 3. Slideshow Höhe reduzieren */
  .slideshow {
    height: 40vh;
    min-height: 250px;
  }

  .pfeil {
    font-size: 30px;
    width: 20%;
  }

  /* 4. "Über mich" Sektion: Bild über Text */
  .uebermich-grid {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .uebermich-img {
    max-width: 90%;
  }

  .uebermich-box {
    text-align: center;
    max-width: 100%;
    padding: 0;
  }

  /* 5. Feedback-Sektion */
    .feedback {
    height: auto;      /* Erlaubt der Sektion so hoch zu sein wie der Inhalt */
    min-height: unset; /* Entfernt die 300px Begrenzung */
    margin-top: 5vh;
    padding-bottom: 20px;
  }

  /* 2. Den sichtbaren Bereich flexibel machen */
  .feedback-viewport {
    height: auto;
    min-height: unset;
  }

  /* 3. Abstände und Schrift anpassen */
  .feedback-wrapper {
    max-width: 100%;
    margin: 0 12px; /* Deine gewünschten 12px Rand */
  }

  .feedback-box {
    /* Wir ziehen links und rechts Platz für die Pfeile ab (ca. 40px pro Seite) */
    min-width: calc(100% - 80px); 
    margin: 10px 40px; /* Dieser Margin schiebt die Box aus der "Gefahrenzone" der Pfeile */
    padding: 16px;
    height: auto;
    box-sizing: border-box;
  }

  /* 2. Die Schriftgröße verringern, damit der Text trotz weniger Breite passt */
  .feedback-box p {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* 3. Die Pfeile kleiner und besser positioniert */
  .feedback-arrow {
    width: 40px; /* Feste Breite für die Klickfläche */
    font-size: 24px;
    position: absolute;
    z-index: 10;
    /* Optional: Hintergrund dezent abdunkeln für bessere Sichtbarkeit */
    background: rgba(255, 255, 255, 0.5); 
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .feedback-arrow.left {
    left: 0;
  }

  .feedback-arrow.right {
    right: 0;
  }

  /* 4. Sicherstellen, dass nichts rechts rausragt */
  .feedback-viewport {
    width: 100%;
    overflow: hidden;
  }

  /* 6. CTA (Call to Action) */
  .cta-section {
    padding: 60px 20px;
    padding-bottom: 10vh;
  }

  .cta-section h2 {
    font-size: 1.8rem;
  }
}