/* Horizontales Scrollen auf Mobile unterbinden:
   Verhindert, dass einzelne zu breite Elemente (Tabellen, Bilder, lange Woerter)
   die gesamte Seite horizontal scrollbar machen.
   Hinweis: NUR auf body, NICHT auf html – sonst bricht window.scrollTo() in Chrome,
   weil der Scroll-Container vom Viewport auf das html-Element wechselt. */
body {
  overflow-x: hidden;
}

/* Lange Woerter/URLs umbrechen, damit sie nicht aus dem Container herausragen. */
.container {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Responsive h1: Auf sehr kleinen Screens (< 480px) die Schriftgroesse reduzieren,
   damit "Wunschzettel" nicht breiter als der Viewport wird (48px ist zu gross).
   Gleichzeitig einen Tick groesser als vorher (7vw -> 7.5vw). */
@media (max-width: 480px) {
  h1, .h1 {
    font-size: 7.5vw;
  }
}

/* Intro-Section: Abstand zum Navbar reduzieren, damit auf 13"-Laptop
   die App-Store-Buttons ohne Scrollen sichtbar sind.
   Standard section padding-top ist 90px – hier auf 30px reduziert. */
#intro.text-intro {
  padding-top: 30px;
}

/* Abstaende innerhalb der Intro-Section kompakter machen */
#intro h1 {
  margin-bottom: 10px;
}

/* Intro-Subtitle: Semantisch jetzt h2, optisch aber wie vorher (h4-Groesse).
   Auf Mobile einen Tick kleiner. */
#intro > .container > .row > .col-md-12 > h2 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  #intro > .container > .row > .col-md-12 > h2 {
    font-size: 18px;
  }
}

/* Intro-Section h3: Optisch wie vorher (h4-Groesse beibehalten).
   margin-top fuer Abstand zum vorherigen Element (z.B. "Beispiel Wunschzettel"-Button),
   margin-bottom klein, da die Store-Buttons direkt darunter semantisch dazugehoeren. */
#intro h3 {
  font-size: 24px;
  font-weight: 400;
  margin-top: 24px;
  margin-bottom: 8px;
}

/* Feature-Liste im Intro: Abstand zwischen den Punkten etwas reduzieren.
   Die h4-Elemente (Icons) in den Tabellenzellen erzeugen sonst zu viel Luft. */
#intro table td {
  padding-top: 2px;
  padding-bottom: 2px;
}
#intro table h4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* App-Store-Buttons nebeneinander mit Abstand anzeigen */
.store-buttons {
  display: inline-flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0;
}

/* Kontakt-Section: Unteren Abstand zur folgenden Section (Impressum) reduzieren.
   Standard ist 90px – hier auf 40px. */
#contact.section {
  padding-bottom: 40px;
}

/* Refactored: Logo in der Landingpage-Navbar auf sinnvolle Maximalhöhe begrenzen,
   damit es nicht höher als die Navigationsleiste angezeigt wird. */
.header .navbar-brand img,
.navbar.navbar-default .navbar-brand img {
  max-height: 64px;
  height: auto;
  width: auto;
}