:root {
  --Logo-test: rgba(0, 0, 0, 0.63);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* Fokus-Stile für bessere Tastaturnavigation */
:focus {
  outline: 3px solid #9747ff;
  outline-offset: 2px;
}

html {
  font-size: 16px; /* Basis-Schriftgröße für die gesamte Seite */
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100vw;
  overflow-x: hidden;
  background: #111;
  margin: 0;
  position: relative;
}

/* Skip-Link für Tastaturnavigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #9747ff;
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
}

/* Versteckte Texte für Screenreader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* === Navigation & Header Bereich === */
.Navigation {
  position: relative;
  display: flex;
  flex-direction: column; /* Anordnung der Elemente in einer Spalte */
  align-items: flex-start; /* Elemente nach links ausrichten */
  gap: 1rem; /* Abstand zwischen den Elementen */
  min-height: 20vh; /* Minimale Höhe von 20% der Viewport-Höhe */
  background: linear-gradient(
    0deg,
    #070708 0%,
    #9747ff 100%
  ); /* Farbverlauf von Schwarz zu Lila */
  padding: 1rem;
  margin: 0;
  overflow: hidden; /* Verhindert das Überlaufen von Inhalt */
}

/* === Styling für den Button in der Navigation === */
.navbutton {
  display: flex;
  height: 2.5rem; /* Höhe des Buttons */
  padding: 0rem 1.25rem; /* Innenabstand des Buttons */
  justify-content: center; /* Text horizontal zentrieren */
  align-items: center; /* Text vertikal zentrieren */
  border: 1px solid #252232; /* Border in einem dunklen Farbton */
  background: #101015; /* Hintergrund des Buttons */
  color: #b6b3b2; /* Textfarbe des Buttons */
  text-align: center; /* Text zentriert ausrichten */
  font-family: Inter; /* Schriftart des Textes */
  font-size: 1rem; /* Schriftgröße */
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* Keine zusätzliche Zeilenhöhe */
  transition: background 0.2s ease, color 0.2s ease; /* Sanfte Übergänge bei Farbänderungen */
  margin-top: -1.25vh; /* Abstand nach oben */
  border-radius: 5px; /* Abgerundete Ecken */
  cursor: pointer; /* Cursor als Zeiger anzeigen */
}


/* === Desktop-Navigation === */
.Nav-leiste {
  position: fixed; /* Fixiert die Navigation oben */
  top: 3rem;
  right: 2.5rem; /* Position von rechts */
  display: flex;
  gap: 2rem; /* Abstand zwischen den Links */
  z-index: 10; /* Sicherstellt, dass die Navigation über anderen Inhalten liegt */
  font-size: 1.12rem; /* Schriftgröße der Links */
}

.Nav-leiste a {
  color: #bebebb; /* Textfarbe für Links */
  font-family: Inter; /* Schriftart */
  font-size: 1rem; /* Schriftgröße */
  font-weight: 400; /* Schriftgewicht */
  line-height: 100%; /* Keine zusätzliche Zeilenhöhe */
  transition: color 0.2s ease; /* Übergangseffekt bei der Farbänderung */
  text-decoration: none; /* Entfernt die Unterstreichung */
}

/* === Dekoratives Element im Header === */
.Art {
  position: absolute; /* Absolut positioniert */
  top: 35%;
  left: 50%; /* Zentriert das Element */
  transform: translate(-45%, -55%) rotate(-25.716deg); /* Zentriert und dreht das Element */
  width: 40vw; /* Breite des dekorativen Elements */
  height: 25vw; /* Höhe des dekorativen Elements */
  min-height: 15vw; /* Minimale Höhe */
  border-radius: 40rem 0 60rem 40rem; /* Abgerundete Ecken */
  background: rgba(0, 0, 0, 0.63); /* Dunkler Hintergrund mit Transparenz */
  z-index: 0; /* Setzt das Element hinter andere Inhalte */
}

/* === Zentrale Logo-Darstellung === */
.Logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Zentriert das Logo */
  display: flex;
  flex-direction: column; /* Anordnung der Elemente in einer Spalte */
  align-items: center;
  gap: 1rem; /* Abstand zwischen den Elementen */
  z-index: 1; /* Setzt das Logo vor das dekorative Element */
}

.Logo img:first-child {
  width: 4vw; /* Breite des ersten Logos */
  max-width: 6rem; /* Maximale Breite */
}

.Logo img:last-child {
  width: 15vw; /* Breite des zweiten Logos */
  max-width: 20rem; /* Maximale Breite */
}

/* === Hamburger-Menü === */
.hamburger {
  position: fixed; /* Fixiert den Hamburger Button oben rechts */
  top: 1rem;
  right: 1rem;
  display: none; /* Nur bei kleineren Bildschirmgrößen sichtbar */
  flex-direction: column; /* Anordnung der Balken als Spalte */
  gap: 5px; /* Abstand zwischen den Balken */
  background: none;
  border: none;
  z-index: 1001; /* Über allen anderen Elementen */
  cursor: pointer; /* Cursor als Zeiger anzeigen */
}

.hamburger span {
  width: 30px; /* Breite des Balkens */
  height: 3px; /* Höhe des Balkens */
  background: rgba(151, 71, 255, 1); /* Farbe des Hamburger-Menüs */
  border-radius: 2px; /* Abgerundete Ecken für die Balken */
  display: none; /* Balken sind zunächst unsichtbar */
}

/* === Mobiles Overlay-Menü mit Transparenz === */
.mobile-nav {
  position: fixed; /* Fixiert das Menü */
  top: 0;
  right: -100vw; /* Menü startet außerhalb des Bildschirms */
  width: 250px; /* Breite des mobilen Menüs */
  height: 100vh; /* Höhe des Bildschirms */
  background: rgba(26, 26, 31, 0.7); /* Hintergrund mit Transparenz */
  transition: right 0.4s ease; /* Sanfte Animation für das Einblenden */
  z-index: 999; /* Über allen anderen Elementen */
  flex-direction: column; /* Anordnung der Links vertikal */
  justify-content: center; /* Zentrierung der Links */
  align-items: center;
  display: none; /* Menü ist standardmäßig unsichtbar */
  padding-bottom: 30vh; /* Abstand nach unten */
}

.mobile-nav.open {
  display: flex; /* Menü wird angezeigt, wenn die Klasse "open" hinzugefügt wird */
  right: 0; /* Menü kommt von rechts */
}

.mobile-nav a {
  text-decoration: none; /* Entfernt die Unterstreichung */
  color: rgba(151, 71, 255, 1); /* Textfarbe für Links */
  background: #1a1a1a; /* Hintergrundfarbe der Links */
  padding: 1rem 2rem; /* Innenabstand */
  border-radius: 1.5rem; /* Abgerundete Ecken für Links */
  margin: 1rem 0; /* Abstand zwischen den Links */
  font-size: 1.2rem; /* Schriftgröße der Links */
  transition: background 0.3s ease; /* Übergangseffekt bei der Hintergrundfarbe */
}

.mobile-nav a:hover {
  background: #333; /* Hintergrundfarbe bei Hover-Effekt */
}

/* === Schließen-Button im Overlay-Menü === */
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: rgba(151, 71, 255, 1); /* Farbe des Schließen-Buttons */
  cursor: pointer; /* Mauszeiger als Zeiger anzeigen */
}

/* Container für die Gruppe 0 */
.group0 {
  width: 100%; /* Breite auf 100% setzen */
  display: flex; /* Flexbox-Layout aktivieren */
  padding: 2rem 1rem; /* Innenabstand oben/unten 2rem, links/rechts 1rem */
  flex-direction: column; /* Elemente in einer Spalte anordnen */
  align-items: flex-start; /* Elemente am Anfang der Spalte ausrichten */
  gap: 0.625rem; /* Abstand zwischen den Elementen */
  align-self: stretch; /* Container in der Breite dehnen */
  background: #070708; /* Hintergrundfarbe */
  box-sizing: border-box; /* Padding und Border in die Breite/Höhe einbeziehen */
  position: relative; /* Position relativ setzen für absolute Positionierung von Kind-Elementen */
  z-index: 2; /* Stapelreihenfolge */
}

/* Container für die erste Sektion */
.section1 {
  width: 100%; /* Breite auf 100% setzen */
  max-width: 1200px; /* Maximale Breite auf 1200px beschränken */
  margin: 0 auto; /* Automatischer Außenabstand für zentrierte Ausrichtung */
  display: flex; /* Flexbox-Layout aktivieren */
  flex-direction: row; /* Elemente in einer Zeile anordnen */
  flex-wrap: wrap; /* Elemente umbrechen, wenn der Platz nicht ausreicht */
  justify-content: space-between; /* Platz zwischen den Elementen verteilen */
  gap: 2rem; /* Abstand zwischen den Elementen */
  color: white; /* Textfarbe auf weiß setzen */
  align-items: center; /* Elemente vertikal zentrieren */
}

/* Container 4 für spezifische Inhalte */
.container4 {
  width: 100%;
  max-width: 100%;
  min-width: 300px;
  box-sizing: border-box;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: #16161C;
  flex: 1 1 45%;
  border-radius: 1.625rem; /* Abgerundete Ecken */
  align-items: center; /* Elemente horizontal zentrieren */
}

/* Container 5 für spezifische Inhalte */
.container5 {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  overflow: visible;
  align-items: center;
}

/* Zeile für Icons */
.icon-row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  width: 100%;
  max-width: 100%;
  min-height: 3.5rem;
  box-sizing: border-box;
  overflow: visible;
  gap: 0.2rem;
  padding: 0;
  align-items: center;
}

/* Stil für Icons */
.icon-img {
  width: 4rem; /* Breite auf 4rem setzen */
  height: 4rem; /* Höhe auf 4rem setzen */
  object-fit: contain; /* Bild im Container anpassen */
  object-position: center; /* Bild zentrieren */
  display: block; /* Block-Element */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  flex-shrink: 0; /* Verhindern, dass das Bild schrumpft */
}

/* Stil für den Text neben Icons */
/* Icontext global anpassen */
.Icontext1, .Icontext2, .Icontext3, .Icontext4 {
  width: 45%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  align-items: center;
}

/* Container 3 für spezifische Inhalte */
.container3 {
  flex: 1 1 300px; /* Flex-Eigenschaften: wächst, schrumpft und hat eine Basisbreite von 300px */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  min-width: 300px; /* Minimale Breite auf   */
  height: auto; /* Höhe automatisch anpassen */
  box-sizing: border-box; /* Padding und Border in die Breite/Höhe einbeziehen */
  flex: 1 1 45%;
  gap: 0.625rem; /* Abstand zwischen den Elementen */
}

/* Wrapper für Buttons */
.button-wrapper {
  margin-top: 1rem; /* Außenabstand oben von 1rem */
}

/* Stil für den Kontakt-Button */
.KontaktButton {
  display: inline-flex; /* Inline-Flexbox-Layout aktivieren */
  align-items: center; /* Elemente vertikal zentrieren */
  justify-content: center; /* Elemente horizontal zentrieren */

  padding: 0.75rem 1.5rem; /* Innenabstand */
  border-radius: 0.3125rem; /* Abgerundete Ecken */
  background: #7e52cc; /* Hintergrundfarbe */
  color: #cabcf0; /* Textfarbe */

  font-family: "Battambang-Regular", sans-serif !important; /* Schriftart */
  font-size: 1.0625rem; /* Schriftgröße */
  font-weight: 400; /* Schriftgewicht */
  line-height: 1.2; /* Zeilenhöhe */

  white-space: nowrap; /* Kein Zeilenumbruch */
  text-align: center; /* Text zentrieren */

  border: none; /* Keine Rahmenlinie */
  margin-top: 1rem; /* Außenabstand oben von 1rem */
}

/* Stil für die Hauptüberschrift */
.Heading1 {
  width: 100%; /* Breite auf 100% setzen */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  height: auto; /* Höhe automatisch anpassen */
  color: #fff; /* Textfarbe auf weiß setzen */
  font-family: "KaiseiTokumin-Regular", sans-serif !important; /* Schriftart */
  font-size: 3rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 700; /* Schriftgewicht */
  line-height: 1.25; /* Zeilenhöhe */
  overflow: visible; /* Überlauf sichtbar */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  word-break: normal; /* Wörter normal brechen */
  overflow-wrap: break-word; /* Wörter brechen, wenn sie zu lang sind */
  margin-bottom: 4rem; /* Außenabstand unten von 2rem */
}

/* Stil für den Text 1 */
.Text1 {
  width: auto; /* Breite automatisch anpassen */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  height: 3.375rem; /* Höhe auf 3.375rem setzen */
  flex-shrink: 0; /* Verhindern, dass der Text schrumpft */
  overflow: visible; /* Überlauf sichtbar */
  color: #b4b3b1; /* Textfarbe */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: "Battambang-Regular", sans-serif !important; /* Schriftart */
  font-size: 1.1875rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 400; /* Schriftgewicht */
  line-height: 142.105%; /* Zeilenhöhe */
}

/* Stil für den Kontext 1 */
.Icontext1 {
  color: #c2c1c1; /* Textfarbe */
  font-family: "Battambang-Regular", sans-serif !important; /* Schriftart */
  font-size: 1rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 400; /* Schriftgewicht */
  line-height: 1.4; /* Zeilenhöhe */
  margin: 0; /* Außenabstand auf 0 setzen */

  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  overflow: visible; /* Überlauf sichtbar */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  word-break: break-word; /* Wörter brechen, wenn sie zu lang sind */
}

/* Stil für den Kontext 2 */
.Icontext2 {
  color: #999899; /* Textfarbe */
  font-family: "Battambang-Regular", sans-serif !important; /* Schriftart */
  font-size: 1rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 400; /* Schriftgewicht */
  line-height: 1.4; /* Zeilenhöhe */
  margin-top: 1.5rem; /* Außenabstand oben von 1.5rem */

  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  overflow: visible; /* Überlauf sichtbar */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  word-break: break-word; /* Wörter brechen, wenn sie zu lang sind */
  height: auto; /* Höhe automatisch anpassen */
}

/* Stil für den Kontext 3 */
.Icontext3 {
  color: #aba9a8; /* Textfarbe */
  font-family: "Battambang-Regular", sans-serif !important; /* Schriftart */
  font-size: 1rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 500; /* Schriftgewicht */
  line-height: 1.2; /* Zeilenhöhe */
  margin-top: 0.5rem; /* Außenabstand oben von 0.5rem */

  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  overflow: visible; /* Überlauf sichtbar */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  word-break: break-word; /* Wörter brechen, wenn sie zu lang sind */
  height: auto; /* Höhe automatisch anpassen */
}

/* Stil für den Kontext 4 */
.Icontext4 {
  font-family: "Battambang-Regular", sans-serif !important; /* Schriftart */
  font-size: 1rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 500; /* Schriftgewicht */
  line-height: 1.2; /* Zeilenhöhe */
  color: #8c898a; /* Textfarbe */
  margin-top: 1.25rem; /* Außenabstand oben von 1.25rem */

  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  height: auto; /* Höhe automatisch anpassen */
  overflow: visible; /* Überlauf sichtbar */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  word-break: break-word; /* Wörter brechen, wenn sie zu lang sind */
}

/* Container 1 für spezifische Inhalte */
.group1 {
  display: flex; /* Flexbox-Layout aktivieren */
  padding: 3.125rem 0rem; /* Innenabstand oben/unten von 3.125rem */
  flex-direction: column; /* Elemente in einer Spalte anordnen */
  align-items: flex-start; /* Elemente am Anfang der Spalte ausrichten */
  gap: 0.625rem; /* Abstand zwischen den Elementen */
  align-self: stretch; /* Container in der Breite dehnen */
  background: #070708; /* Hintergrundfarbe */
}

/* Sektion 2 mit Hintergrundbild */
.section2 {
  width: 88%; /* Breite auf 88% setzen */
  height: 49.875rem; /* Höhe auf 49.875rem setzen */
  border-radius: 0.6875rem; /* Abgerundete Ecken */
  background: url(/images/Laptop.png) lightgray 50% / cover no-repeat; /* Hintergrundbild zentriert und skaliert */
  padding: 2rem; /* Innenabstand */
  box-sizing: border-box; /* Padding und Border in die Breite/Höhe einbeziehen */
}

/* Container 7 für spezifische Inhalte */
.container7 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 27.625rem; /* Breite auf 27.625rem setzen */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  padding-top: 3.5rem; /* Innenabstand oben von 3.5rem */
  flex-direction: column; /* Elemente in einer Spalte anordnen */
  justify-content: flex-end; /* Elemente am Ende des Containers ausrichten */
  align-items: flex-start; /* Elemente am Anfang des Containers ausrichten */
  gap: 0.3rem; /* Abstand zwischen den Elementen */
  margin-bottom: 1; /* Außenabstand unten von 1 (Einheit nicht spezifiziert, möglicherweise rem oder px) */
  margin-left: 4rem; /* Außenabstand links von 4rem */
}

/* Stil für den Button 2 */
.button2 {
  display: inline-flex; /* Inline-Flexbox-Layout aktivieren */
  width: 8rem; /* Breite auf 8rem setzen */
  height: 2.5rem; /* Höhe auf 2.5rem setzen */
  padding: 0.875rem 1.6875rem 1.375rem 1.6875rem; /* Innenabstand */
  justify-content: center; /* Elemente horizontal zentrieren */
  align-items: center; /* Elemente vertikal zentrieren */
  background: #7a4ec8; /* Hintergrundfarbe */
  flex-shrink: 0; /* Verhindern, dass der Button schrumpft */
  overflow: hidden; /* Überlauf verstecken */
  color: #ccbbeb; /* Textfarbe */
  text-align: center; /* Text zentrieren */
  text-overflow: ellipsis; /* Ellipsen anzeigen, wenn der Text überläuft */
  white-space: nowrap; /* Kein Zeilenumbruch */
  font-family: Inter; /* Schriftart */
  font-size: 0.9375rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 400; /* Schriftgewicht */
  line-height: 100%; /* Zeilenhöhe */
  margin-top: 2rem; /* Außenabstand oben von 2rem */
}

/* Stil für die Überschrift 2 */
.Heading2 {
  width: 100%; /* Breite auf 100% setzen */
  flex-shrink: 0; /* Verhindern, dass die Überschrift schrumpft */
  overflow: hidden; /* Überlauf verstecken */
  color: #fefdfe; /* Textfarbe */
  text-overflow: ellipsis; /* Ellipsen anzeigen, wenn der Text überläuft */
  white-space: nowrap; /* Kein Zeilenumbruch */
  font-family: "KaiseiTokumin-Regular", sans-serif !important; /* Schriftart */
  font-size: 2.5rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 700; /* Schriftgewicht */
  line-height: 100%; /* Zeilenhöhe */
  margin-top: 12rem; /* Außenabstand oben von 12rem */
  white-space: normal; /* Zeilenumbruch aktivieren */
  overflow: visible; /* Überlauf sichtbar */
}

/* Stil für den Text 2 */
.Text2 {
  width: 100%; /* Breite auf 100% setzen */
  overflow: hidden; /* Überlauf verstecken */
  color: #99989e; /* Textfarbe */
  text-overflow: ellipsis; /* Ellipsen anzeigen, wenn der Text überläuft */
  white-space: nowrap; /* Kein Zeilenumbruch */
  font-family: "Battambang-Regular", sans-serif !important; /* Schriftart */
  font-size: 1.125rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 400; /* Schriftgewicht */
  line-height: 1.6; /* Zeilenhöhe */
  white-space: normal; /* Zeilenumbruch aktivieren */
  overflow: visible; /* Überlauf sichtbar */
  margin-top: 5rem; /* Außenabstand oben von 5rem */
  margin-bottom: 5rem; /* Außenabstand unten von 5rem */
}

/* === Footer Bereich === */
.footer {
  display: flex;
  flex-wrap: wrap; /* Ermöglicht flexibles Layout mit Umbruch */
  justify-content: space-between; /* Verteilt die Spalten gleichmäßig */
  gap: 2rem;
  padding: 2rem;
  background: #1A1B1F; /* Dunkler Hintergrund für den Footer */
  box-sizing: border-box; /* Stellt sicher, dass Padding und Border in der Breite berücksichtigt werden */
  max-width: 100vw;
  margin: 0 auto;
}

.footer-column {
  flex: 1 1 200px;
  color: rgba(184, 183, 183, 1);
  display: flex;
  flex-direction: column; /* Anordnung der Spaltenelemente vertikal */
  gap: 0.75rem; /* Abstand zwischen den Elementen */
}

.Footer-Logo {
  width: 4vw;
  max-width: 6rem;
  padding-bottom: 1.5rem; /* Abstand nach unten */
}

.Linkcolumn a {
  color: rgba(184, 183, 183, 1);
  text-decoration: none; /* Entfernt die Unterstreichung */
}

.Linkcolumn a:hover {
  color: white; /* Textfarbe bei Hover-Effekt */
}
/* Container 2 für spezifische Inhalte */
.group2 {
  display: flex; /* Flexbox-Layout aktivieren */
  flex-direction: column; /* Elemente in einer Spalte anordnen */
  align-items: center; /* Elemente horizontal zentrieren */
  gap: 2.625rem; /* Abstand zwischen den Elementen */
  align-self: stretch; /* Container in der Breite dehnen */
  background: #070708; /* Hintergrundfarbe */
}

/* Sektion 3 mit spezifischer Breite und automatischer Höhe */
.section3 {
  width: 74.25rem; /* Breite auf 74.25rem setzen */
  height: auto; /* Höhe automatisch anpassen */
  padding-bottom: 2rem; /* Innenabstand unten von 2rem */
}

/* Container 10 für spezifische Inhalte */
.container10 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
  padding: 0 1rem;
  box-sizing: border-box;
}

.container18, .container11 {
  width: 48%;
  min-width: 300px;
  max-width: 600px;
  height: auto;
  flex-direction: column;
  gap: 2.5rem;
  flex: 0 1 auto;
}

.container22, .container19, .container15, .container12 {
  width: 100%;
  height: 15rem;
  min-height: 15rem;
  max-height: 15rem;
  padding: 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0.8125rem; /* Abgerundete Ecken */
  background: #1e1d22; /* Hintergrundfarbe */
}

.headercontainer12, .headercontainer15, .headercontainer21, .headercontainer22 {
  height: 2.5rem;
  min-height: 2.5rem;
  max-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  overflow: hidden;
  font-family: "KaiseiTokumin-Regular", sans-serif !important; /* Schriftart */
  color: #fefefe; /* Textfarbe */
}

/* Text-Container in den Service-Karten mit fester Höhe */
.textcontainer12, .textcontainer15, .textcontainer21, .textcontainer22 {
  height: 7rem;
  min-height: 7rem;
  max-height: 7rem;
  overflow: auto;
  font-family: "Battambang-Regular", sans-serif !important; /* Schriftart */
  color: #828288; /* Textfarbe */
}



/* Container 21 für spezifische Inhalte */
.container21 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 35rem; /* Breite auf 35rem setzen */
  height: 15rem; /* Höhe auf 15rem setzen */
  flex-direction: column; /* Elemente in einer Spalte anordnen */
  align-items: center; /* Elemente horizontal zentrieren */
  justify-content: center; /* Elemente vertikal zentrieren */
  text-align: center; /* Text zentrieren */
  flex-shrink: 0; /* Verhindern, dass der Container schrumpft */
}


/* Container 9 für spezifische Inhalte */
.container9 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 74.125rem; /* Breite auf 74.125rem setzen */
  flex-direction: column; /* Elemente in einer Spalte anordnen */
  justify-content: flex-end; /* Elemente am Ende des Containers ausrichten */
  align-items: center; /* Elemente horizontal zentrieren */
  gap: 0.625rem; /* Abstand zwischen den Elementen */
}

/* Textcontainer 9 für spezifischen Text */
.textcontainer9 {
  width: 42.875rem; /* Breite auf 42.875rem setzen */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  height: 7rem; /* Höhe auf 7rem setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #b5b4b3; /* Textfarbe */
  text-align: center; /* Text zentrieren */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: "Battambang-Regular", sans-serif !important; /* Schriftart */
  font-size: 1.125rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 500; /* Schriftgewicht */
  line-height: 155.556%; /* Zeilenhöhe */
}

/* Headercontainer 9 für spezifische Überschrift */
.headercontainer9 {
  width: 74.125rem; /* Breite auf 74.125rem setzen */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  height: 4.25rem; /* Höhe auf 4.25rem setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #FDFDFD; /* Textfarbe */ 
  text-align: center; /* Text zentrieren */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-size: 3.5rem; /* Schriftgröße */
  font-family: 'KaiseiTokumin-Regular', sans-serif !important; /* Schriftart mit Fallback */
  font-style: normal; /* Schriftstil */
  font-weight: 700; /* Schriftgewicht */
  line-height: 120%; /* Zeilenhöhe */
}

/* Gruppe 3 für einen flexiblen Container mit Padding */
.group3 {
  display: flex; /* Flexbox-Layout aktivieren */
  padding: 2.5rem 8.125rem; /* Innenabstand oben/unten 2.5rem, links/rechts 8.125rem */
  flex-direction: column; /* Elemente in einer Spalte anordnen */
  align-items: center; /* Elemente horizontal zentrieren */
  gap: 0.625rem; /* Abstand zwischen den Elementen */
  align-self: stretch; /* Container dehnt sich über die gesamte Breite */
  background: #070708; /* Hintergrundfarbe */
}

/* Abschnitt 4 für einen flexiblen Container */
.section4 {
  display: flex; /* Flexbox-Layout aktivieren */
  flex-direction: column; /* Elemente in einer Spalte anordnen */
  align-items: center; /* Elemente horizontal zentrieren */
  gap: 4.6875rem; /* Abstand zwischen den Elementen */
}

/* Container 24 für zentrierte Inhalte */
.container24 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 100%; /* Breite auf 100% setzen */
  max-width: 1172px; /* Maximale Breite auf 1172px beschränken */
  padding: 0 1rem; /* Innenabstand links/rechts 1rem */
  flex-direction: column; /* Elemente in einer Spalte anordnen */
  justify-content: center; /* Elemente vertikal zentrieren */
  align-items: center; /* Elemente horizontal zentrieren */
}

/* Container für Überschrift 24 */
.headingcontainer24 {
  height: 3.5rem; /* Höhe auf 3.5rem setzen */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  flex-shrink: 0; /* Verhindern, dass der Container schrumpft */
  overflow: visible; /* Überlauf sichtbar */
  color: #FDFDFD; /* Textfarbe */
  text-align: center; /* Text zentrieren */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: 'KaiseiTokumin-Regular', sans-serif !important; /* Schriftart mit Fallback */
  font-size: 2.875rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 700; /* Schriftgewicht */
  line-height: 120%; /* Zeilenhöhe */
}

/* Container 25 für zentrierte Inhalte */
.container25 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 73.75rem; /* Breite auf 73.75rem setzen */
  justify-content: center; /* Elemente horizontal zentrieren */
  align-items: center; /* Elemente vertikal zentrieren */
  gap: 7.1875rem; /* Abstand zwischen den Elementen */
}

/* Container 26 für spezifische Inhalte */
.container26 {
  display: flex; /* Flexbox-Layout aktivieren */
  flex-direction: column; /* Elemente in einer Spalte anordnen */
  padding: 0.625rem; /* Innenabstand von 0.625rem */
  align-items: center; /* Elemente horizontal zentrieren */
  justify-content: center; /* Elemente vertikal zentrieren */
  text-align: center; /* Text zentrieren */
  gap: 2.5rem; /* Abstand zwischen den Elementen */
}

/* Textcontainer 26 für spezifischen Text */
.textcontainer26 {
  width: 100%; /* Breite auf 100% setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #888787; /* Textfarbe */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: 'Battambang-Regular', sans-serif !important; /* Schriftart */
  font-size: 1.125rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 400; /* Schriftgewicht */
  line-height: 168.519%; /* Zeilenhöhe */
}

/* Headercontainer 26 für Überschrift */
.headercontainer26 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 100%; /* Breite auf 100% setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #FDFDFD; /* Textfarbe (fast weiß) */
  text-overflow: unset; /* Kein spezieller Überlauf */
  font-family: 'KaiseiTokumin-Regular', sans-serif !important; /* Schriftart mit CSS-Variable als Fallback */
  font-size: 2.125rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil normal */
  font-weight: 700; /* Schrift fett */
  line-height: 126.471%; /* Zeilenhöhe, ca. 2.6875rem */
  white-space: normal; /* Normaler Zeilenumbruch */
}

/* Bildcontainer 26 für Bild */
.imagecontainer26 {
  width: auto; /* Automatische Breite */
  height: 28.375rem; /* Höhe auf 28.375rem setzen */
  flex-shrink: 0; /* Verhindert das Schrumpfen */
  border-radius: 0.625rem; /* Abgerundete Ecken */
}

/* Gruppe 4: Flexibler Container für Abschnitt mit Padding und Hintergrund */
.group4 {
  display: flex; /* Aktiviert Flexbox-Layout */
  padding: 2.5rem 8.0625rem; /* Innenabstand: 2.5rem oben/unten, 8.0625rem links/rechts */
  flex-direction: column; /* Anordnung der Kinder-Elemente in einer Spalte */
  align-items: center; /* Horizontale Zentrierung der Kinder-Elemente */
  gap: 0.625rem; /* Abstand zwischen den Kinder-Elementen */
  align-self: stretch; /* Container dehnt sich in der Ausrichtung (hier Breite) aus */
  background: #070708; /* Hintergrundfarbe in sehr dunklem Grau/Schwarz */
}

.section5 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 73.75rem; /* Breite auf 73.75rem setzen */
  justify-content: center; /* Elemente horizontal zentrieren */
  align-items: center; /* Elemente vertikal zentrieren */
  gap: 7.1875rem; /* Abstand zwischen den Elementen */
}

/* Container 28: Flexibler Container für zentrierte Inhalte */
.container28 {
  display: flex; /* Aktiviert Flexbox-Layout */
  width: 100%; /* Breite auf 100% setzen */
  max-width: 1172px; /* Maximale Breite auf 1172px beschränken */
  padding: 0.625rem; /* Innenabstand von 0.625rem */
  flex-direction: column; /* Anordnung der Kinder-Elemente in einer Spalte */
  justify-content: center; /* Vertikale Zentrierung der Kinder-Elemente */
  align-items: center; /* Horizontale Zentrierung der Kinder-Elemente */
  text-align: center; /* Text innerhalb des Containers zentrieren */
  gap: 2.5rem; /* Abstand zwischen den Kinder-Elementen */
}

.textcontainer28 {
  width: 100%; /* Breite auf 100% setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #888787; /* Textfarbe */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: 'Battambang-Regular', sans-serif !important; /* Schriftart */
  font-size: 1.125rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 400; /* Schriftgewicht */
  line-height: 168.519%; /* Zeilenhöhe */
}

.headercontainer28 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 100%; /* Breite auf 100% setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #FDFDFD; /* Textfarbe (fast weiß) */
  text-overflow: unset; /* Kein spezieller Überlauf */
  font-family: 'KaiseiTokumin-Regular', sans-serif !important; /* Schriftart mit CSS-Variable als Fallback */
  font-size: 2.125rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil normal */
  font-weight: 700; /* Schrift fett */
  line-height: 126.471%; /* Zeilenhöhe, ca. 2.6875rem */
  white-space: normal; /* Normaler Zeilenumbruch */
}

.imagecontainer28 {
  width: auto; /* Automatische Breite */
  height: 28.375rem; /* Höhe auf 28.375rem setzen */
  flex-shrink: 0; /* Verhindert das Schrumpfen */
  border-radius: 0.625rem; /* Abgerundete Ecken */
}

/* Gruppe 5: Flexibler Container für Abschnitt mit Padding und Hintergrund */
.group5 {
  display: flex; /* Aktiviert Flexbox-Layout */
  padding: 4.875rem 8rem; /* Innenabstand: 4.875rem oben/unten, 8rem links/rechts */
  flex-direction: column; /* Anordnung der Kinder-Elemente in einer Spalte */
  align-items: center; /* Kinder-Elemente am Anfang der Flex-Achse (links) ausrichten */
  gap: 0.625rem; /* Abstand zwischen den Kinder-Elementen */
  align-self: stretch; /* Container dehnt sich in der Ausrichtung (hier Breite) aus */
  background: #070708; /* Hintergrundfarbe in sehr dunklem Grau/Schwarz */
}

/* Abschnitt 6: Flexibler Container für zentrierte Inhalte */
.section6 {
  display: flex; /* Aktiviert Flexbox-Layout */
  justify-content: center; /* Horizontale Zentrierung der Kinder-Elemente */
  flex-direction: column; /* Anordnung der Kinder-Elemente in einer Spalte */
  align-items: center; /* Horizontale Zentrierung der Kinder-Elemente */
  gap: 4.25rem; /* Abstand zwischen den Kinder-Elementen */
}

.container30 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 74.125rem; /* Breite auf 74.125rem setzen */
  flex-direction: column; /* Elemente in einer Spalte anordnen */
  justify-content: center; /* Elemente am Ende des Containers ausrichten */
  align-items: center; /* Elemente horizontal zentrieren */
  gap: 0.625rem; /* Abstand zwischen den Elementen */
}

.textcontainer30 {
  width: 42.875rem; /* Breite auf 42.875rem setzen */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  height: 7rem; /* Höhe auf 7rem setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #b5b4b3; /* Textfarbe */
  text-align: center; /* Text zentrieren */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: "Battambang-Regular", sans-serif !important; /* Schriftart */
  font-size: 1.125rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 500; /* Schriftgewicht */
  line-height: 155.556%; /* Zeilenhöhe */
}

.headercontainer30 {
  width: 74.125rem; /* Breite auf 74.125rem setzen */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  height: 4.25rem; /* Höhe auf 4.25rem setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #fefefe; /* Textfarbe */
  text-align: center; /* Text zentrieren */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: "KaiseiTokumin-Regular", sans-serif !important; /* Schriftart */
  font-size: 3.5rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 700; /* Schriftgewicht */
  line-height: 120%; /* Zeilenhöhe */
}

/* Container 31: Flexibler Container mit zentrierten Inhalten */
.container31 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 74rem; /* Breite auf 74rem setzen */
  justify-content: center; /* Inhalte horizontal zentrieren */
  align-items: center; /* Inhalte vertikal zentrieren */
  gap: 6.4375rem; /* Abstand zwischen den Elementen */
}

/* Bildcontainer 31 für Bilder */
.imagecontainer31 {
  width: 37.125rem; /* Breite auf 37.125rem setzen */
  height: 26.0625rem; /* Höhe auf 26.0625rem setzen */
  flex-shrink: 0; /* Verhindert Schrumpfen */
  border-radius: 0.625rem; /* Abgerundete Ecken */
}

/* Container 32 für Inhalt mit flexiblem Layout */
.container32 {
  width: 30.4375rem; /* Breite auf 30.4375rem setzen */
  height: auto; /* Automatische Höhe */
  flex-shrink: 0; /* Verhindert Schrumpfen */
  gap: 5rem; /* Abstand zwischen den Elementen */
}

.textcontainer32 {
  width: 100%; /* Breite auf 100% setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #888787; /* Textfarbe */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: 'Battambang-Regular', sans-serif !important; /* Schriftart */
  font-size: 1.125rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 400; /* Schriftgewicht */
  line-height: 168.519%; /* Zeilenhöhe */
}

.headercontainer32 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 100%; /* Breite auf 100% setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #FDFDFD; /* Textfarbe (fast weiß) */
  text-overflow: unset; /* Kein spezieller Überlauf */
  font-family: 'KaiseiTokumin-Regular', sans-serif !important; /* Schriftart mit CSS-Variable als Fallback */
  font-size: 2.125rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil normal */
  font-weight: 700; /* Schrift fett */
  line-height: 126.471%; /* Zeilenhöhe, ca. 2.6875rem */
  white-space: normal; /* Normaler Zeilenumbruch */
}


/* Stil für Button 3 */
.button3 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 9.8125rem; /* Breite auf 9.8125rem setzen */
  padding: 0.90625rem 1.6875rem; /* Innenabstand oben/unten 0.90625rem, links/rechts 1.6875rem */
  justify-content: center; /* Inhalt horizontal zentrieren */
  align-items: center; /* Inhalt vertikal zentrieren */
  flex-shrink: 0; /* Verhindert, dass der Button schrumpft */
  border-radius: 6rem; /* Sehr stark abgerundete Ecken, runder Button-Effekt */
  background: #9548ED; /* Hintergrundfarbe */
  margin-top: 2.5rem; /* Außenabstand oben von 2.5rem */
  overflow: hidden; /* Überlauf verstecken, damit Text nicht aus dem Button ragt */
  color: #CCBBEB; /* Textfarbe */
  text-align: center; /* Text zentrieren */
  text-overflow: ellipsis; /* Ellipsis anzeigen, wenn Text zu lang ist */
  white-space: nowrap; /* Zeilenumbruch verhindern */
  font-family: Inter; /* Schriftart */
  font-size: 0.9375rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 700; /* Schriftgewicht (fett) */
  line-height: 120%; /* Zeilenhöhe */
}

.group6 {
  display: flex;
  padding: 6.25rem 8rem;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  background: #070708;
}

.section7 {
  display: flex;
  flex-direction: column;
  gap: 3.9375rem;
  align-items: flex-end;
}

.container34 {
  display: flex;
  width: 73.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.09375rem;
  width:100%;
}

.textcontainer34 {
  width: 42.875rem; /* Breite auf 42.875rem setzen */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  height: 7rem; /* Höhe auf 7rem setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #b5b4b3; /* Textfarbe */
  text-align: center; /* Text zentrieren */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: "Battambang-Regular", sans-serif !important; /* Schriftart */
  font-size: 1.125rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 500; /* Schriftgewicht */
  line-height: 155.556%; /* Zeilenhöhe */
}

.headercontainer34 {
  width: 74.125rem; /* Breite auf 74.125rem setzen */
  max-width: 100%; /* Maximale Breite auf 100% beschränken */
  height: 4.25rem; /* Höhe auf 4.25rem setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #fefefe; /* Textfarbe */
  text-align: center; /* Text zentrieren */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: "KaiseiTokumin-Regular", sans-serif !important; /* Schriftart */
  font-size: 3.5rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 700; /* Schriftgewicht */
  line-height: 120%; /* Zeilenhöhe */
}

.container35 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 29rem;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 2rem 1rem;
  box-sizing: border-box;
  overflow: visible;
}

.imagetextblock {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.3rem 2rem 1.3rem;
  width: 30%;
  min-width: 280px;
  max-width: 350px;
  height: auto;
  flex: 0 1 auto;
  margin-bottom: 2rem;
  border-radius: 0.3125rem;
  background: #605F66;
  box-sizing: border-box;
  overflow: hidden;
  align-items: flex-start;
}


.container36 {
  width: 18rem;
  height: auto;
  flex-direction: row;
  gap: 4rem;
}

.Plus {
  transform: scale(0.5);
  border-radius: 3rem;
  justify-content: center;
  margin-bottom: 0rem;
  margin-left: -2rem;
}

.headercontainer36 {
  display: flex; /* Flexbox-Layout aktivieren */
  width: 100%; /* Breite auf 100% setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #FDFDFD; /* Textfarbe (fast weiß) */
  text-overflow: unset; /* Kein spezieller Überlauf */
  font-family: 'KaiseiTokumin-Regular', sans-serif !important; /* Schriftart mit CSS-Variable als Fallback */
  font-size: 1.6rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil normal */
  font-weight: 700; /* Schrift fett */
  line-height: 126.471%; /* Zeilenhöhe, ca. 2.6875rem */
  white-space: normal; /* Normaler Zeilenumbruch */
  margin-top: -1.5rem; /* Abstand nach unten verringern */
  margin-bottom: 1.5rem; /* Abstand nach unten */
}

.textcontainer36a {
  width: 100%; /* Breite auf 100% setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #888787; /* Textfarbe */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: 'Battambang-Regular', sans-serif !important; /* Schriftart */
  font-size: 1rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 400; /* Schriftgewicht */
  line-height: 168.519%; /* Zeilenhöhe */
  margin-bottom: 1rem; /* Abstand nach unten */
}

.textcontainer36b {
  width: 100%; /* Breite auf 100% setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #888787; /* Textfarbe */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: 'Battambang-Regular', sans-serif !important; /* Schriftart */
  font-size: 1rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 400; /* Schriftgewicht */
  line-height: 168.519%; /* Zeilenhöhe */ 
  margin-bottom: 1rem; /* Abstand nach unten */
}

.textcontainer36c {
  width: 100%; /* Breite auf 100% setzen */
  overflow: visible; /* Überlauf sichtbar */
  color: #888787; /* Textfarbe */
  text-overflow: unset; /* Kein spezieller Überlauf */
  white-space: normal; /* Zeilenumbruch aktivieren */
  font-family: 'Battambang-Regular', sans-serif !important; /* Schriftart */
  font-size: 1rem; /* Schriftgröße */
  font-style: normal; /* Schriftstil */
  font-weight: 400; /* Schriftgewicht */
  line-height: 168.519%; /* Zeilenhöhe */
}

.BildL {
  width: 22.9375rem;
  height: 20.4375rem;
  flex-shrink: 0;
  border-radius: 0.3125rem;
  background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.BildR {
width: 22.8125rem;
  height: 20.5rem;
  flex-shrink: 0;
  background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */

/* ===== Spezifische Fixes für container4 auf allen Geräten ===== */

/* Global container4 Fix - gilt für alle Bildschirmgrößen */
.container4 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: visible;
}

/* Icon Row Container global optimieren */
.icon-row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  width: 100%;
  max-width: 100%;
  min-height: 3.5rem;
  box-sizing: border-box;
  overflow: visible;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding: 0;
}

.icon-img {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  max-width: 3rem; 
  grid-column: 1;
  object-fit: contain;
  justify-self: flex-start;
  align-self: flex-start;
  margin: 0;
}

.icon-text {
  width: 100%;
  max-width: 100%;
  grid-column: 2;
  overflow-wrap: break-word;
  word-break: break-word;
  padding-right: 0.5rem;
  box-sizing: border-box;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* Container5 als Grid für bessere Kontrolle */
.container5 {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100%;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  box-sizing: border-box;
  padding: 0;
  overflow: visible;
}

/* Icontext global anpassen */
.Icontext1, .Icontext2, .Icontext3, .Icontext4 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* ===== Global Media Queries ===== */
/* iPad Pro spezifische Anpassungen */
@media (min-width: 1024px) and (max-width: 1366px) {
  .container10 {
    max-width: 95%;
    margin: 0 auto;
  }
  
  .container18, .container11 {
    width: 48%;
    min-width: 300px;
  }
}

/* Tablet-Ansicht (horizontale Ausrichtung) */
@media (max-width: 1023px) {
  .container10 {
    flex-direction: column;
    align-items: center;
  }
  
  .container18, .container11 {
    width: 100%;
    max-width: 600px;
  }
}

@media (max-width: 1400px) {
  /* General font size adjustments */
  html {
    font-size: 14px;
  }
  
  /* Container width adjustments */
  .container9, .container10, .container11, .container18, .container24, 
  .container25, .container30, .container31, .container34, .section3, .section5 {
    width: 90%;
    max-width: 1200px;
  }

  .container10 {
    gap: 0.3rem;
  }
  
  /* Header containers size adjustments */
  .headercontainer9, .headercontainer12, .headercontainer15, 
  .headercontainer21, .headercontainer22, .headercontainer30, .headercontainer34 {
    width: 100%;
    font-size: 3rem;
  }
  
  /* Text containers width */
  .textcontainer9, .textcontainer12, .textcontainer15, 
  .textcontainer21, .textcontainer22, .textcontainer30, .textcontainer34 {
    width: 90%;
    max-width: 38rem;
  }
}

/* ===== Large Tablets and Small Desktops ===== */
@media (max-width: 1200px) {
  html {
    font-size: 13px;
  }
  
  /* Navigation adjustments */
  .Nav-leiste {
    gap: 1.5rem;
    right: 1.5rem;
  }
  
  /* Containers for main sections */
  .container9, .container10, .container11, .container18, .container24, 
  .container25, .container30, .container31, .container34, .section3, .section5 {
    width: 95%;
  }
  
  /* Header text size reduction */
  .Heading1 {
    font-size: 2.5rem;
  }
  
  .headercontainer9, .headercontainer30, .headercontainer34 {
    font-size: 2.8rem;
  }
  
  .headercontainer12, .headercontainer15, .headercontainer21, 
  .headercontainer22, .headercontainer26, .headercontainer28, .headercontainer32 {
    font-size: 1.8rem;
  }
  
  /* Image containers */
  .imagecontainer26, .imagecontainer28, .imagecontainer31 {
    height: auto;
    max-height: 25rem;
    width: auto;
    max-width: 100%;
  }
  
  /* Group layout adjustments */
  .group2, .group3, .group4, .group5, .group6 {
    padding: 4rem 2rem;
  }
  
  /* Section 2 laptop adjustment */
  .section2 {
    width: 95%;
    height: 40rem;
    background-position: center;
  }
}

/* Frühere Anpassung für container18 und container11 - bereits ab 1200px */
@media (max-width: 1200px) {
  .container10 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0rem;
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
  }
  
  .container18, .container11 {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
  }
  
  /* Service-Karten mit gleicher Größe */
  .container15, .container12, .container19, .container22 {
    width: 100%;
    height: auto;
    min-height: 15rem; /* Einheitliche Mindesthöhe */
    padding: 2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Headings in Service-Karten mit gleicher Höhe */
  .headercontainer12, .headercontainer15, .headercontainer21, .headercontainer22 {
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
  }
  
  /* Text in Service-Karten mit gleicher Höhe */
  .textcontainer12, .textcontainer15, .textcontainer21, .textcontainer22 {
    height: auto;
    min-height: 7rem;
  }
}

/* Spezieller Breakpoint für container18 und container11 */
@media (max-width: 1024px) {
  /* Container10 anpassen, um Überlauf zu verhindern */
  .container10 {
    width: 100%;
    max-width: 90%;
    padding: 0;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    overflow: visible;
  }
  
  /* Container18 und container11 größe anpassen */
  .container18, .container11 {
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    overflow: hidden;
  }
  
  /* Service-Karten gleiche Größe */
  .container22, .container19, .container15, .container12 {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 15rem;
    margin-bottom: 2rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ===== Tablets ===== */
@media (max-width: 992px) {
  html {
    font-size: 12px;
  }
  
  /* Navigation changes */
  .Nav-leiste {
    display: none;
  }
  
  .hamburger {
    display: flex;
  }
  
  .hamburger span {
    display: block;
  }
  
  .mobile-nav {
    display: flex;
  }
  
  /* Main sections layout */
  .section1 {
    flex-direction: column;
    gap: 3rem;
  }
  
  .container3, .container4 {
    width: 100%;
  }
  
  /* Container 7 positioning */
  .container7 {
    width: 90%;
    margin-left: 1.5rem;
  }
  
  /* 2-column layouts become 1-column - verhindert dass container11 aus dem Bild ragt */
  .container10 {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    height: auto;
    gap: 0.3rem;
    padding: 0;
    overflow: visible;
  }
  
  .container11, .container18 {
    width: 100%;
    max-width: 90%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
  }
  
  /* Alle Service-Karten mit gleicher Höhe und Größe */
  .container15, .container12, .container19, .container22 {
    width: 100%;
    height: auto;
    min-height: 13rem;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Überschriften in Service-Karten mit gleicher Höhe */
  .headercontainer12, .headercontainer15, .headercontainer21, .headercontainer22 {
    height: 2.3rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Texte in Service-Karten mit gleicher Höhe */
  .textcontainer12, .textcontainer15, .textcontainer21, .textcontainer22 {
    height: auto;
    min-height: 6rem;
  }
  
  /* Image adjustments */
  .Art {
    width: 70vw;
    height: 50vw;
  }
  
  .Logo img:first-child {
    width: 8vw;
    max-width: 5rem;
  }
  
  .Logo img:last-child {
    width: 30vw;
    max-width: 15rem;
  }
  
  /* Section 2 height on tablets */
  .section2 {
    height: 35rem;
  }
  
  /* Head elements in section 2 */
  .Heading2 {
    font-size: 2rem;
    margin-top: 6rem;
  }
  
  .Text2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  
  /* Group and section padding */
  .group2, .group3, .group4, .group5, .group6 {
    padding: 3rem 1.5rem;
  }
  
  /* Group 6 image blocks */
  .container35 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }
  
  .imagetextblock {
    width: 45%;
    min-width: 18rem;
  }
  
  .container31 {
    flex-direction: column;
    height: auto;
  }
  
  .container32 {
    width: 100%;
    height: auto;
  }
}

/* ===== iPad Anpassungen (760-825px) ===== */
@media (min-width: 760px) and (max-width: 825px) {
  /* Seite einrücken, damit nichts herausragt */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }
  
  /* Alle Container auf maximale Breite begrenzen */
  .container4, .container5, .section1, .group0, .group1, .group2,
  .group3, .group4, .group5, .group6 {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  /* Icon Row Probleme endgültig beheben */
  .icon-row {
    grid-template-columns: 3.2rem 1fr;
    min-height: 4rem;
    gap: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .icon-img {
    width: 3.2rem;
    height: 3.2rem;
    min-width: 3.2rem;
    max-width: 3.2rem;
  }
  
  .icon-text {
    font-size: 0.95rem;
    line-height: 1.45;
  }
  
  .container4 {
    padding: 1.2rem;
    gap: 1.8rem;
    margin-bottom: 2rem;
  }
  
  /* Container5 Anpassungen */
  .container5 {
    gap: 2rem;
    margin-bottom: 2rem;
  }
  
  /* Icontexte anpassen */
  .Icontext1, .Icontext2, .Icontext3, .Icontext4 {
    font-size: 1rem;
    line-height: 1.5;
  }
  
  /* Container3 Höhe reduzieren */
  .container3 {
    height: auto;
    max-height: none;
    margin-bottom: 1rem;
    padding-bottom: 0;
  }
  
  /* Text1 Höhe reduzieren */
  .Text1 {
    height: auto;
    max-height: none;
    margin-bottom: 1rem;
  }
  
  /* Container35 und Imagetextblocks anpassen */
  .container35 {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0 1rem 5rem;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .imagetextblock {
    width: 90%;
    max-width: 450px;
    height: auto;
    max-height: 28rem;
    margin: 0 auto 1rem;
    box-sizing: border-box;
  }
  
  /* Die Bilder in den Blöcken anpassen */
  .BildL, .BildR {
    width: 100%;
    height: auto;
    max-height: 14rem;
    object-fit: cover;
  }
}


@media (max-width: 1191px) {
  .container35 {
    gap: 1.5rem;
    padding: 1rem 0.5rem 3rem;
  }
  
  .imagetextblock {
    width: 45%;
    min-width: 250px;
    max-width: 400px;
  }
}

/* Breakpoint für kleinere Bildschirme (577-767px) */
@media (min-width: 577px) and (max-width: 767px) {
  .container35 {
    flex-direction: column;
    align-items: center;
    padding-bottom: 4rem;
  }
  
  .imagetextblock {
    width: 90%;
    max-width: 450px;
    margin-bottom: 2rem;
  }
  
  .BildL, .BildR {
    min-height: 150px;
    max-height: 200px;
  }
}

/* Mobil-Ansicht */
@media (max-width: 576px) {
  .container35 {
    flex-direction: column;
    align-items: center;
    padding-bottom: 5rem;
  }
  
  .imagetextblock {
    width: 95%;
    max-width: 400px;
    margin-bottom: 2rem;
  }
  
  .BildL, .BildR {
    min-height: 130px;
    max-height: 180px;
  }
}
/* Korrektur für headercontainer34 und textcontainer34 Überlappung */
@media (min-width: 768px) and (max-width: 820px) {
  /* Container34 Layoutprobleme beheben */
  .container34 {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    gap: 2rem;
  }
  
  /* Überschrift und Text klar trennen */
  .headercontainer34 {
    width: 100%;
    font-size: 2rem;
    height: auto;
    min-height: 3rem;
    margin-bottom: 1rem;
    overflow: visible;
    display: flex;
    justify-content: center;
    text-align: center;
  }
  
  .textcontainer34 {
    width: 90%;
    max-width: 600px;
    height: auto;
    min-height: 5rem;
    margin: 0 auto;
    padding-top: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
  }
}

/* ===== Small Tablets and Large Phones ===== */
@media (max-width: 768px) {
  html {
    font-size: 11px;
  }
  
  /* Header & navigation */
  .Navigation {
    min-height: 15vh;
  }
  
  .Logo {
    top: 40%;
  }
  
  .Logo img:first-child {
    width: 12vw;
  }
  
  .Logo img:last-child {
    width: 40vw;
  }
  
  /* Section 1 */
  .group0 {
    padding: 1.5rem 1rem;
  }
  
  .Heading1 {
    font-size: 2.2rem;
    line-height: 1.3;
  }
  
  .Text1 {
    font-size: 1rem;
    height: auto;
  }
  
  /* Section 2 - laptop section */
  .section2 {
    height: 30rem;
    width: 100%;
    border-radius: 0;
  }
  
  .container7 {
    width: 90%;
    margin-left: 1rem;
    padding-top: 1rem;
  }
  
  .Heading2 {
    font-size: 1.8rem;
    margin-top: 1rem;
    white-space: normal;
  }
  
  .Text2 {
    white-space: normal;
    margin-top: 1rem;
    margin-bottom: 1rem;
    overflow: visible;
  }
  
  /* Section 3 - services */
  .headercontainer9, .headercontainer30, .headercontainer34 {
    font-size: 2rem;
    height: auto;
  }
  
  .textcontainer9, .textcontainer30, .textcontainer34 {
    font-size: 1rem;
    height: auto;
  }
  
  /* Feature cards */
  .container15, .container12, .container19, .container22 {
    padding: 1.5rem;
    gap: 1rem;
  }
  
  /* Sections 4 & 5 */
  .container25, .section5 {
    flex-direction: column;
    gap: 2rem;
  }
  
  .container26, .container28 {
    width: 100%;
  }
  
  /* Image containers */
  .imagecontainer26, .imagecontainer28, .imagecontainer31 {
    order: -1; /* Images appear before text on mobile */
  }
  
  /* Container34 Anpassungen - verhindert Überlappung */
  .container34 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: auto;
    width: 100%;
    max-width: 100%;
  }
  
  .headercontainer34 {
    font-size: 1.8rem;
    width: 100%;
    height: auto;
    min-height: 3rem;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .textcontainer34 {
    width: 95%;
    height: auto;
    max-width: 550px;
    font-size: 1rem;
    line-height: 1.6;
    margin: 1rem auto 0;
    text-align: center;
  }
}

/* Group 6 styles to ensure container35 doesn't overflow into footer */
.group6 {
  display: flex;
  padding: 6.25rem 8rem 8rem; /* Added more padding at bottom */
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  background: #070708;
  position: relative; /* Ensure proper stacking */
  overflow: hidden; /* Prevent content overflow */
  margin-bottom: 2rem; /* Extra space before footer */
}

.section7 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3.9375rem;
  max-width: 100%; /* Ensure content doesn't overflow */
  width: 100%;
}

/* Group 6 - Info blocks - improved responsiveness */
.container35 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  gap: 1.5rem;
  max-width: 100%; /* Constrain width */
  overflow: hidden; /* Prevent overflow */
  padding-bottom: 3rem; /* Extra padding */
}

.imagetextblock {
  width: calc(50% - 1.5rem);
  min-width: 250px;
  max-width: 350px;
  height: auto;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  overflow: hidden; /* Prevent content overflow */
}

.imagetextblock:hover {
  transform: translateY(-5px);
}

/* Container 36 adjustments */
.container36 {
  width: 100%;
  height: auto;
  padding: 0 0.5rem;
}



/* Add a separator between group6 and footer */
.group6::after {
  content: '';
  display: block;
  height: 2rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #070708;
  z-index: 1;
}

/* Improve container35 spacing for all breakpoints */
@media (max-width: 768px) {
  .group6 {
    padding: 3rem 1.5rem 5rem;
    margin-bottom: 1rem;
  }
  
  .container35 {
    padding-bottom: 2rem;
  }
  
  .footer {
    margin-top: 0.5rem;
  }
  
  /* Group 6 - Info blocks */
  .imagetextblock {
    width: 100%;
    max-width: 90%;
  }
}

/* ===== Mobile Phones ===== */
@media (max-width: 576px) {
  html {
    font-size: 10px;
  }
  
  /* Navigation & header */
  .Navigation {
    min-height: 12vh;
  }
  
  .Art {
    width: 90vw;
    height: 70vw;
    transform: translate(-45%, -55%) rotate(-20deg);
  }
  
  .Logo img:first-child {
    width: 15vw;
    max-width: 4rem;
  }
  
  .Logo img:last-child {
    width: 45vw;
    max-width: 10rem;
  }
  
  /* Section 1 */
  .Heading1 {
    font-size: 1.8rem;
  }
  
  .container5 {
    margin-bottom: 1rem;
  }
  
  /* Container3 Höhe korrigieren und Abstand zum KontaktButton reduzieren */
  .container3 {
    height: auto;
    max-height: none;
    margin-bottom: 0.5rem; /* Reduzierter Abstand nach unten */
    padding-bottom: 0; /* Kein zusätzliches Padding */
    overflow: hidden;
  }
  
  /* Konkrete Höhenangabe entfernen */
  .Text1 {
    height: auto;
    max-height: none;
    margin-bottom: 0.5rem; /* Reduzierter Abstand */
  }
  
  /* Abstand zum KontaktButton reduzieren */
  .button-wrapper {
    margin-top: 0.5rem; /* Reduzierter Abstand */
  }
  
  .KontaktButton {
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    margin-top: 0.5rem; /* Reduzierter Abstand */
  }
  
  /* Handy-spezifische Icon-Row Anpassungen */
  .icon-row {
    grid-template-columns: 2.8rem 1fr;
    min-height: 3.5rem;
    gap: 0.7rem;
    margin-bottom: 0.3rem;
  }
  
  .icon-img {
    width: 2.8rem;
    height: 2.8rem;
    min-width: 2.8rem;
    max-width: 2.8rem;
  }
  
  .icon-text {
    font-size: 0.9rem;
    line-height: 1.4;
    padding-right: 0.3rem;
  }
  
  /* Container5 anpassen */
  .container5 {
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  /* Icontext anpassen */
  .Icontext1, .Icontext2, .Icontext3, .Icontext4 {
    font-size: 0.9rem;
    line-height: 1.4;
  }
  
  /* Section 2 */
  .section2 {
    height: 25rem;
  }
  
  .container7 {
    width: 95%;
    margin-left: 0.5rem;
  }
  
  .Heading2 {
    font-size: 1.5rem;
    margin-top: 0;
  }
  
  .Text2 {
    font-size: 0.9rem;
  }
  
  .button2 {
    width: 7rem;
    height: 2rem;
    font-size: 0.8rem;
  }
  
  /* Section 3 - services */
  .headercontainer9, .headercontainer30, .headercontainer34 {
    font-size: 1.7rem;
  }
  
  .textcontainer9, .textcontainer30, .textcontainer34 {
    font-size: 0.9rem;
  }
  
  /* Feature cards */
  .headercontainer12, .headercontainer15, .headercontainer21, .headercontainer22 {
    font-size: 1.3rem;
  }
  
  .textcontainer12, .textcontainer15, .textcontainer21, .textcontainer22 {
    font-size: 0.9rem;
  }
  
  /* Sections 4 & 5 */
  .headercontainer26 {
    font-size: 1.3rem;
  }
  
  /* headercontainer32 mittig zentrieren */
  .headercontainer32 {
    text-align: center;
    width: 100%;
    font-size: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  
  /* textcontainer32 ebenfalls zentrieren für einheitliches Layout */
  .textcontainer32 {
    text-align: center;
    font-size: 0.9rem;
    width: 100%;
    margin: 0 auto;
  }
  
  /* container32 anpassen */
  .container32 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /* Einheitliche Schriftgrößen für andere Header beibehalten */
  .headercontainer26 {
    font-size: 1.3rem;
  }
  
  /* Einheitliche Schriftgrößen für andere Text-Container beibehalten */
  .textcontainer26, .textcontainer28 {
    font-size: 0.9rem;
  }
  
  /* Zentrieren der headercontainer28 */
  .headercontainer28 {
    text-align: center;
    width: 100%;
    font-size: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Section 5 button */
  .button3 {
    width: 100%;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
  }
  
  /* Group 6 vergrößern, um Footer-Überlappung zu verhindern */
  .group6 {
    padding: 2rem 1rem 10rem; /* Viel mehr Padding unten */
    height: auto;
    min-height: auto;
    position: relative;
    z-index: 1;
  }
  
  /* Container35 und Inhalt besser positionieren */
  .container35 {
    height: auto;
    max-height: none;
    margin-bottom: 5rem; /* Zusätzlicher Abstand nach unten */
    padding-bottom: 3rem;
    position: relative;
  }
  
  .section7 {
    position: relative;
    padding-bottom: 3rem;
  }
  
  /* Group 6 - Info blocks */
  .imagetextblock {
    padding: 0.5rem 0.8rem 1.5rem;
  }
  
  .headercontainer36 {
    font-size: 1.1rem;
    margin-top: -1rem;
  }
  
  .textcontainer36a, .textcontainer36b, .textcontainer36c {
    font-size: 0.85rem;
    line-height: 1.4;
  }
  
  /* Fester Footer ohne Überlappung */
  .footer {
    position: relative;
    z-index: 10; /* Höher als alle anderen Elemente */
    margin-top: 2rem; /* Mehr Abstand nach oben */
    padding: 2rem 1rem;
    background: #1a1b1f; /* Hintergrundfarbe wiederholen */
    border-top: 2px solid #252232; /* Sichtbare Trennung */
  }
}

/* Fix icon-row on very small screens */
@media (max-width: 480px) {
  .icon-row {
    grid-template-columns: minmax(2.5rem, auto) 1fr;
    gap: 0.6rem;
  }
  
  .icon-img {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .icon-text {
    font-size: 0.9rem;
    padding-right: 0.3rem;
  }
  
  /* Ensure the container5 doesn't overflow */
  .container5 {
    width: 100%;
    overflow: hidden;
    gap: 1.5rem;
  }
  
  /* Icontext anpassen */
  .Icontext1, .Icontext2, .Icontext3, .Icontext4 {
    font-size: 0.9rem;
    line-height: 1.35;
  }
  
  /* Even better container35 adjustments for tiny screens */
  .container35 {
    gap: 1rem;
    padding-bottom: 2rem;
  }
  
  .imagetextblock {
    width: 100%;
    max-width: 100%;
    min-width: auto;
    margin-bottom: 1rem;
  }
  
  /* Add footer spacing */
  .group6 {
    padding-bottom: 4rem;
    margin-bottom: 1rem;
  }
}

/* Speziell für iPhone Plus Größen */
@media (min-width: 414px) and (max-width: 430px) {
  .icon-row {
    grid-template-columns: minmax(3rem, auto) 1fr;
    gap: 0.7rem;
  }
  
  .icon-img {
    width: 3rem;
    height: 3rem;
  }
}

/* ===== Small Mobile Phones ===== */
@media (max-width: 375px) {
  html {
    font-size: 9px;
  }
  
  /* Navigation */
  .Logo {
    gap: 0.3rem;
  }
  
  .Logo img:first-child {
    width: 16vw;
    max-width: 3.5rem;
  }
  
  .Logo img:last-child {
    width: 50vw;
    max-width: 9rem;
  }
  
  /* Section 1 */
  .group0 {
    padding: 1rem 0.5rem;
  }
  
  .Heading1 {
    font-size: 1.6rem;
  }
  
  .Text1 {
    font-size: 0.9rem;
  }
  
  /* Icon row noch kompakter machen */
  .icon-row {
    grid-template-columns: minmax(2.3rem, auto) 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .icon-img {
    width: 2.3rem;
    height: 2.3rem;
  }
  
  .icon-text {
    font-size: 0.85rem;
    line-height: 1.35;
    padding-right: 0.2rem;
  }
  
  /* Container5 kompakter machen */
  .container5 {
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  /* Fontgröße für Icontexte reduzieren */
  .Icontext1, .Icontext2, .Icontext3, .Icontext4 {
    font-size: 0.85rem;
    line-height: 1.35;
  }
  
  /* Section 2 */
  .section2 {
    height: 22rem;
  }
  
  .container7 {
    margin-left: 0.3rem;
    width: 95%;
  }
  
  .Heading2 {
    font-size: 1.3rem;
  }
  
  .Text2 {
    font-size: 0.85rem;
  }
  
  /* Major headers */
  .headercontainer9, .headercontainer30, .headercontainer34 {
    font-size: 1.5rem;
  }
  
  /* Section 3 card headers */
  .headercontainer12, .headercontainer15, .headercontainer21, .headercontainer22 {
    font-size: 1.2rem;
  }
  
  /* Section 4 & 5 headers */
  .headercontainer26, .headercontainer28, .headercontainer32 {
    font-size: 1.2rem;
  }
  
  /* Section 6 image blocks */
  .headercontainer36 {
    font-size: 1rem;
  }
  
  .textcontainer36a, .textcontainer36b, .textcontainer36c {
    font-size: 0.8rem;
  }
  
  /* Image containers */
  .imagecontainer26, .imagecontainer28, .imagecontainer31 {
    border-radius: 0.3rem;
  }
  
  /* Buttons */
  .KontaktButton, .button2, .button3 {
    font-size: 0.8rem;
    padding: 0.6rem 0.8rem;
  }
}

/* Additional fixes for specific elements */

/* Fix for missing button hover states */
.navbutton:hover {
  background: #1e1e24;
  color: #ffffff;
}

.KontaktButton:hover, .button2:hover, .button3:hover {
  background: #8b63d6;
  cursor: pointer;
}

/* Fix transitions with proper syntax */
.navbutton {
  transition: background 0.2s ease, color 0.2s ease;
}

/* Fix for the mobile menu when open */
.mobile-nav.open {
  right: 0;
  display: flex;
}

/* Flexbox fix for service cards */
@media (max-width: 768px) {
  .container10, .container11, .container18 {
    flex-direction: column;
    height: auto;
  }
  
  .container15, .container12, .container19, .container22 {
    width: 100%;
    margin-bottom: 1.5rem;
  }
}

/* Fix for group 2 overflow issue */
@media (max-width: 768px) {
  .group2 {
    min-height: auto;
    height: auto;
    gap: 3rem;
    padding-bottom: 3rem;
  }
}

/* Better support for ultra-wide screens */
@media (min-width: 1921px) {
  html {
    font-size: 18px;
  }
  
  .container9, .container10, .container11, .container18, .container24, 
  .container25, .container30, .container31, .container34, .section3, .section5 {
    max-width: 1600px;
  }
  
  .Art {
    width: 35vw;
    height: 20vw;
    max-width: 800px;
    max-height: 500px;
  }
}

/* === Font-Import === */
@font-face {
  font-family: "Battambang-Thin";
  src: url("fonts/Battambang-Thin.ttf") format("truetype");
}

@font-face {
  font-family: "Battambang-Light";
  src: url("fonts/Battambang-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Battambang-Regular";
  src: url("fonts/Battambang-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Battambang-Bold";
  src: url("fonts/Battambang-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Battambang-Black";
  src: url("fonts/Battambang-Black.ttf") format("truetype");
}

@font-face {
  font-family: "KaiseiTokumin-Regular";
  src:
    url("fonts/KaiseiTokumin-Regular.ttf") format("truetype"),
    url("fonts/KaiseiTokumin-Regular.woff") format("woff"),
    url("fonts/KaiseiTokumin-Regular.woff2") format("woff2"),
    url("fonts/KaiseiTokumin-Regular.eot") format("eot");
}

@font-face {
  font-family: "KaiseiTokumin-Medium";
  src:
    url("fonts/KaiseiTokumin-Medium.ttf") format("truetype"),
    url("fonts/KaiseiTokumin-Medium.woff") format("woff"),
    url("fonts/KaiseiTokumin-Medium.woff2") format("woff2"),
    url("fonts/KaiseiTokumin-Medium.eot") format("eot");
}

@font-face {
  font-family: "KaiseiTokumin-Bold";
  src:
    url("fonts/KaiseiTokumin-Bold.ttf") format("truetype"),
    url("fonts/KaiseiTokumin-Bold.woff") format("woff"),
    url("fonts/KaiseiTokumin-Bold.woff2") format("woff2"),
    url("fonts/KaiseiTokumin-Bold.eot") format("eot");
}

@font-face {
  font-family: "KaiseiTokumin-ExtraBold";
  src:
    url("fonts/KaiseiTokumin-ExtraBold.ttf") format("truetype"),
    url("fonts/KaiseiTokumin-ExtraBold.woff") format("woff"),
    url("fonts/KaiseiTokumin-ExtraBold.woff2") format("woff2"),
    url("fonts/KaiseiTokumin-ExtraBold.eot") format("eot");
}