@font-face {
  font-family: "N.O.- Substance 1987";
  src:
    url("font/BodoniBookSSiBook.woff2") format("woff2"),
    url("font/BodoniBookSSiBook.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Entferne Standardabstände von HTML und Body */
html,
body {
  margin-top: 100px;
  /* Höhe der fixierten Navigation */
  margin: 0;
  /* Entfernt Außenabstände */
  padding: 0;
  /* Entfernt Innenabstände */
  box-sizing: border-box;
  /* Padding wird in die Breite/Höhe einbezogen */
  scroll-behavior: smooth;
  /* Sorgt für ein weiches Scrollen zu Anker-Links */
  font-family:
    "No-1987", Arial, sans-serif;
  /* Globale Anwendung der Schriftart */
  font-weight: 300;
  /* Leichtere Schriftdicke für die gesamte Seite */
  background-color: #c8d1da;
  /* Globale Hintergrundfarbe für die gesamte Seite */
}

/* Kontakt-Link Styling */
.kontakt-link {
  color: #3498db;
  /* Gelbe Farbe für den Link */
  text-decoration: none;
  /* Keine Unterstreichung */
  transition:
    color 0.3s,
    text-decoration 0.3s;
  /* Weicher Übergang */
  font-weight: 600;
  /* Etwas dicker als der normale Text */
  cursor: pointer; /* Zeigt den Mauszeiger als Hand an */
  pointer-events: auto !important; /* Stellt sicher, dass Klick-Events funktionieren */
  position: relative; /* Für z-index */
  z-index: 1001; /* Höher als andere Elemente */
}

.kontakt-link:hover {
  color: #ff6565;
  /* Weiß beim Überfahren mit der Maus */
  text-decoration: underline;
  /* Unterstreichung beim Hover */
}

/* Startseite - Layout für Text und Bild nebeneinander */
#startseite {
  position: relative;
  min-height: 70vh;
  /* Mindesthöhe des Viewports */
  background-color: #283949;
  /* Hintergrundfarbe */
  color: white;
  /* Textfarbe */
  padding: 20px;
  /* Innenabstand */
  padding-top: 120px; /* Zusätzlicher Platz für die fixierte Navigation */
}

.startseite-content {
  display: flex !important;
  /* Flexbox für Nebeneinander-Layout mit höherer Priorität */
  flex-direction: row !important;
  /* Explizit horizontale Richtung setzen */
  max-width: 1400px;
  /* Maximale Breite des Inhalts */
  margin: 0 auto;
  /* Zentrieren */
  min-height: 70vh;
  /* Mindesthöhe */
  align-items: center;
  /* Vertikal zentrieren */
  flex-wrap: nowrap !important;
  /* Kein Umbruch erzwingen */
  gap: 30px;
  /* Abstand zwischen Text und Bild */
}

/* Startseite - Text Styling */
.startseite-text h1,
.startseite-text h3 {
  display: block;
  /* Sicherstellen, dass die Texte als Block dargestellt werden */
  line-height: 1.8;
  /* Erhöht den Zeilenabstand für bessere Lesbarkeit */
  margin-bottom: 20px;
  /* Fügt Abstand zwischen den Textblöcken hinzu */
  text-align: justify;
  /* Blocksatz für gleichmäßige Ausrichtung */
  word-spacing: 2px;
  /* Optional: Erhöht den Abstand zwischen Wörtern */
}

.startseite-text {
  flex: 1 !important;
  /* Flexibler Anteil */
  padding: 20px;
  /* Innenabstand */
  max-width: 50%;
  /* Begrenzt die Breite auf 50% */
  order: 1;
  /* Sicherstellen, dass Text zuerst kommt */
}

/* Anpassung für den Text auf der rechten Seite */
.startseite-text p {
  font-size: 150%; /* 30% größere Schrift */
  line-height: 1.8; /* Größerer Zeilenabstand */
  text-align: justify; /* Blocksatz */
  margin-bottom: 15px; /* Abstand zwischen Absätzen */
}

.startseite-bild {
  flex: 1 !important;
  /* Flexibler Anteil */

  display: flex;
  /* Flexbox für Zentrierung des Bildes */
  justify-content: center;
  /* Horizontal zentrieren */
  align-items: center;
  /* Vertikal zentrieren */
  padding: 20px;
  /* Innenabstand */
  max-width: 50%;
  /* Begrenzt die Breite auf 50% */
  order: 2;
  /* Sicherstellen, dass Bild an zweiter Stelle kommt */
}

.startbild {
  width: auto; /* Breite passt sich automatisch an */
  height: auto; /* Höhe passt sich automatisch an */
  max-width: 100%; /* Maximale Breite des Containers */
  max-height: 100%; /* Maximale Höhe des Containers */
  object-fit: scale-down; /* Bild wird skaliert, ohne abgeschnitten zu werden */
  border-radius: 8px; /* Abgerundete Ecken */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Schatten für Tiefe */
}

/* Responsive Design für kleine Bildschirme - explizit erst bei kleineren Bildschirmen umstellen */
@media (max-width: 992px) {
  .startseite-content {
    flex-direction: column !important;
    /* Elemente untereinander anordnen */
    flex-wrap: wrap !important;
    /* Umbruch erlauben */
  }

  .startseite-text,
  .startseite-bild {
    max-width: 100% !important;
    /* Volle Breite */
  }

  .startseite-text {
    order: 2;
    /* Text erscheint unter dem Bild */
  }

  .startseite-bild {
    order: 1;
    /* Bild erscheint über dem Text */
  }
}

/* Hauptinhalt */
#homepage {
  opacity: 0;
  /* Unsichtbar beim Laden */
  transform: translateY(50px);
  /* Leicht nach unten verschoben */
  transition: all 1s ease-in-out;
  /* Weicher Übergang */
  padding: 20px;
  background-color: #f9f9f9;
  /* Heller Hintergrund */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Leichter Schatten */
  border-radius: 8px;
  /* Abgerundete Ecken */
  margin: 20px auto;
  /* Zentrieren */
  max-width: 800px;
  /* Maximale Breite */
  text-align: center;
  /* Text zentrieren */
}

/* Sichtbarer Hauptinhalt */
#homepage.visible {
  opacity: 1;
  /* Voll sichtbar */
  transform: translateY(0);
  /* Zurück zur ursprünglichen Position */
}

/* Verstecken des Startbildes */
#startseite.hidden .startbild {
  opacity: 0;
}

/* Navigation */
nav {
  background-color: #283949;
  /* Dunkelblauer Hintergrund */
  color: white;
  /* Weiße Schrift */
  position: fixed;
  /* Navigation bleibt oben fixiert */
  top: 0;
  /* Fixiert die Navigation oben */
  width: 100%;
  /* Volle Breite */
  z-index: 1000;
  /* Über anderen Elementen */
  display: flex;
  /* Flexbox für Layout */
  justify-content: space-between;
  /* Platzierung: Links für Links, Rechts für Logo */
  align-items: center;
  /* Vertikal zentrieren */
  padding: 10px 20px;
  /* Innenabstand */
  box-sizing: border-box;
  /* Padding wird in die Breite einbezogen */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Schatten für die Navigation */

  /* Navigation - Höhe anpassen */

  height: 100px; /* Höhe der Navigation */
  line-height: 100px; /* Vertikale Zentrierung von Text */
}

/* Navigation Links */
nav ul {
  list-style: none;
  /* Entfernt die Standard-Aufzählungszeichen */
  margin: 0;
  /* Kein zusätzlicher Außenabstand */
  padding: 0;
  /* Kein zusätzlicher Innenabstand */
  display: flex;
  /* Links in einer Zeile anzeigen */
  gap: 20px;
  /* Abstand zwischen den Links */
}

nav ul li {
  display: inline;
  /* Links in einer Zeile anzeigen */
}

nav ul li a {
  text-decoration: none;
  /* Keine Unterstreichung */
  color: white;
  /* Weiße Schriftfarbe */
  font-size: 1.2rem;
  /* Schriftgröße */
  transition: color 0.3s;
  /* Weicher Übergang beim Hover */
}

nav ul li a:hover {
  color: #ffcc00;
  /* Gelbe Schrift beim Hover */
}

/* Logo */
.nav-logo {
  height: 100px;
  /* Höhe des Logos */
  width: auto;
  /* Automatische Breite, damit das Seitenverhältnis erhalten bleibt */
  cursor: pointer;
  /* Zeigt eine Hand an, wenn man über das Logo fährt */
  transition: transform 0.3s;
  /* Animation für Hover */
}

.nav-logo:hover {
  transform: scale(1.1);
  /* Vergrößert das Logo leicht beim Hover */
}

nav.fixed-nav {
  display: flex;
  /* Navigation wird angezeigt */
  position: fixed;
  /* Navigation bleibt oben fixiert */
  top: 0;
  /* Fixiert die Navigation oben */
  width: 100%;
  /* Volle Breite */
  z-index: 1000;
  /* Über anderen Elementen */
  background-color: #283949;
  /* Hintergrundfarbe */
  transition: opacity 0.3s ease-in-out;
  /* Weicher Übergang */
  opacity: 1;
  /* Voll sichtbar */
}

/* Burger-Menü Styling */
.burger-menu {
  display: none; /* Standardmäßig ausgeblendet */
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 24px;
  cursor: pointer;
  z-index: 1001; /* Über der Navigation */
}

.burger-line {
  width: 100%;
  height: 3px;
  background-color: white;
  transition: all 0.3s ease;
  border-radius: 2px;
}

/* Burger-Menü Animation für geöffneten Zustand */
.burger-menu.active .burger-line:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.burger-menu.active .burger-line:nth-child(2) {
  opacity: 0;
}

.burger-menu.active .burger-line:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Responsive Design */
@media (max-width: 900px) {
  /* Burger-Menü anzeigen */
  .burger-menu {
    display: flex;
  }
  
  /* Normales Menü ausblenden */
  nav ul {
    position: fixed;
    top: 0;
    right: -100%; /* Außerhalb des Bildschirms */
    width: 70%; /* Breite des Menüs */
    height: 100vh; /* Volle Höhe */
    background-color: #283949;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.3s ease;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding-top: 60px; /* Platz für das Logo */
  }
  
  /* Geöffnetes Menü anzeigen */
  nav ul.active {
    right: 0; /* Ins Sichtfeld schieben */
  }
  
  nav ul li {
    margin: 20px 0;
    text-align: center;
    width: 100%;
  }
  
  nav ul li a {
    font-size: 1.2rem;
    display: block;
    padding: 10px;
  }
  
  .nav-logo {
    height: 60px; /* Kleineres Logo auf mobilen Geräten */
  }
}

/* Home Section */
#home {
  display: flex;
  /* Flexbox-Layout für zentrierten Inhalt */
  flex-direction: column;
  /* Elemente werden vertikal angeordnet */
  justify-content: center;
  /* Inhalte vertikal zentrieren */
  align-items: center;
  /* Inhalte horizontal zentrieren */
  height: 100vh;
  /* Volle Höhe des Viewports */
  text-align: center;
  /* Zentriere den Text */
  padding: 20px;
  /* Innenabstand */
  background: linear-gradient(to bottom,
      #283949,
      #f9f9f9);
  /* Farbverlauf als Hintergrund */
  color: white;
  /* Weißer Text */
  font-family: "No-1987", Arial, sans-serif;
  /* Schriftart */
}

/* Home Section: Überschrift */
#home h1 {
  font-size: 2.5rem;
  /* Große Schrift für die Überschrift */
  font-weight: bold;
  /* Fettgedruckt */
  margin-bottom: 20px;
  /* Abstand nach unten */
  text-transform: uppercase;
  /* Großbuchstaben */
}

/* Home Section: Text */
#home p {
  font-size: 1.2rem;
  /* Angenehme Schriftgröße */
  line-height: 1.6;
  /* Zeilenhöhe für bessere Lesbarkeit */
  margin-bottom: 15px;
  /* Abstand zwischen den Absätzen */
  max-width: 800px;
  /* Maximale Breite des Textes */
  color: #f0f0f0;
  /* Hellerer Text für besseren Kontrast */
}

/* Initialer Stil für Abschnitte */
section {
  opacity: 0;
  /* Unsichtbar, bis sie eingeblendet werden */
  transform: translateY(50px);
  /* Leicht nach unten verschoben */
  transition: all 0.6s ease-in-out;
  /* Weiche Übergangseffekte */
  position: relative;
  padding-top: 100px;
  /* Zusätzlicher Platz für die Navigation */
  margin-top: -100px;
  /* Negativer Rand, um den Platz auszugleichen */
}

/* Sichtbare Abschnitte */
section.visible {
  opacity: 1;
  /* Voll sichtbar */
  transform: translateY(0);
  /* Zurück zur ursprünglichen Position */
}

/* Mein Angebot - Container */
.angebot-container {
  display: flex;
  /* Flexbox-Layout */
  flex-wrap: wrap;
  /* Zeilenumbruch bei schmalen Bildschirmen */
  gap: 20px;
  /* Abstand zwischen den Kategorien */
  margin-top: 20px;
  /* Abstand zum Titel */
  justify-content: space-between;
  /* Abstand zwischen den Spalten */
  padding: 20px;
  /* Abstand vom Rand des Containers */
}

#angebot h2 {
  margin-top: 100px;
  margin-left: 20px;
  padding-left: 10px;
  border-left: 4px solid #dc4b45;
}

/* Mein Angebot - Kategorie */
.angebot-kategorie {
  flex: 1 1 calc(50% - 20px);
  /* Nimmt 50% der Breite ein, mit Platz für den Abstand */
  background-color: #f9f9f9;
  /* Heller Hintergrund für Kategorien */
  border: 1px solid #ddd;
  /* Leichter Rahmen */
  border-radius: 8px;
  /* Abgerundete Ecken */
  padding: 15px;
  /* Innenabstand */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Schatten für Tiefe */
  box-sizing: border-box;
  /* Padding wird in die Breite einbezogen */
}

/* Mein Angebot - Kategorie Titel */
.angebot-kategorie h3 {
  margin-top: 0;
  /* Kein Abstand nach oben */
  color: #283949;
  /* Dunkelblauer Text */
  font-size: 1.5rem;
  /* Größere Schrift */
  margin-bottom: 10px;
  /* Abstand nach unten */
}

/* Mein Angebot - Liste */
.angebot-kategorie ul {
  list-style-type: disc;
  /* Standard-Aufzählungszeichen */
  padding-left: 20px;
  /* Platz für die Aufzählungszeichen */
  margin: 0;
  /* Kein Außenabstand */
}

.angebot-kategorie ul li {
  margin-bottom: 5px;
  /* Abstand zwischen den Listenpunkten */
  line-height: 1.5;
  /* Lesbarkeit verbessern */
}

/* Responsive Design für schmale Bildschirme */
@media (max-width: 768px) {
  .angebot-kategorie {
    flex: 1 1 100%;
    /* Nimmt die gesamte Breite ein */
  }
}

.ueber-mich-container {
  margin: 20px;
  /* Äußerer Abstand */
}

/* Über mich - Container */
.ueber-mich-container {
  display: flex;
  /* Flexbox-Layout */
  flex-wrap: wrap;
  /* Zeilenumbruch bei schmalen Bildschirmen */
  gap: 20px;
  /* Abstand zwischen Bild und Text */
  align-items: center;
  /* Vertikale Ausrichtung */
  margin-top: 20px;
  /* Abstand nach oben */
  padding: 20px;
  /* Innenabstand */
  background-color: #f9f9f9;
  /* Heller Hintergrund */
  border-radius: 8px;
  /* Abgerundete Ecken */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Schatten für Tiefe */
}

/* Über mich - Bild */
.ueber-mich-container img {
  flex: 1 1 40%;
  /* Nimmt 40% der Breite ein */
  max-width: 100%;
  /* Bild passt sich der Breite an */
  border-radius: 8px;
  /* Abgerundete Ecken */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Schatten für das Bild */
}

/* Über mich - Text */
.ueber-mich-container div {
  text-align: justify;
  /* Blocksatz für gleichmäßige Ausrichtung */
  line-height: 1.8;
  /* Erhöht den Zeilenabstand für bessere Lesbarkeit */
  word-spacing: 2px;
  /* Optional: Erhöht den Abstand zwischen den Wörtern */
  margin-bottom: 15px;
  /* Abstand zwischen den Absätzen */
  flex: 1 1 60%;
  /* Nimmt 60% der Breite ein */
  font-size: 1.2rem;
  /* Angenehme Schriftgröße */
  line-height: 1.6;
  /* Lesbarkeit verbessern */
  color: #333;
  /* Dunkler Text für gute Lesbarkeit */
}

/* Über mich - Überschrift */
.ueber-mich-container h2 {
  margin-top: 0;
  /* Kein Abstand nach oben */
  color: #283949;
  /* Dunkelblauer Text */
  font-size: 2rem;
  /* Größere Schrift */
  margin-bottom: 15px;
  /* Abstand nach unten */
}

/* Styling für das h2-Tag im Abschnitt "Über mich" */
#ueber-mich h2 {
  margin-top: 100px;
  margin-left: 20px;
  padding-left: 10px;
  border-left: 4px solid #dc4b45;
}

/* Über mich - Hervorhebung */
.ueber-mich-container p strong {
  color: #283949;
  /* Dunkelblauer Text für Hervorhebung */
  font-weight: bold;
  /* Fettgedruckt */
}

/* Referenzen - Grid */
.referenzen-grid {
  display: grid;
  /* Grid-Layout */
  grid-template-columns: repeat(4, 1fr);
  /* Standardmäßig 4 Spalten */
  gap: 20px;
  /* Abstand zwischen den Kacheln */
  margin-top: 20px;
  /* Abstand nach oben */
  padding: 20px;
  /* Innenabstand */
}

/* Responsive Design für verschiedene Bildschirmgrößen */
@media (max-width: 1200px) {
  .referenzen-grid {
    grid-template-columns: repeat(3,
        1fr);
    /* 3 Spalten bei mittleren Bildschirmen */
  }
}

@media (max-width: 992px) {
  .referenzen-grid {
    grid-template-columns: repeat(2,
        1fr);
    /* 2 Spalten bei kleineren Bildschirmen */
  }
}

@media (max-width: 576px) {
  .referenzen-grid {
    grid-template-columns: repeat(1,
        1fr);
    /* 1 Spalte bei sehr kleinen Bildschirmen */
  }
}

/* Referenzen - Einzelne Kachel */
.referenz-item {
  position: relative;
  /* Ermöglicht die Platzierung von überlappenden Elementen */
  width: 300px;
  /* Feste Breite des Containers */
  height: 300px;
  /* Feste Höhe des Containers */
  overflow: hidden;
  /* Verhindert, dass Inhalte außerhalb des Containers sichtbar sind */
  background-color: #f9f9f9;
  /* Hintergrundfarbe */
  border: 1px solid #ddd;
  /* Rahmen */
  border-radius: 8px;
  /* Abgerundete Ecken */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Schatten für Tiefe */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  /* Animation beim Hover */
  display: flex;
  /* Flexbox für Zentrierung des Bildes */
  justify-content: center;
  /* Horizontal zentrieren */
  align-items: center;
  /* Vertikal zentrieren */
}

#referenzen h2 {
  margin-top: 100px;
  margin-left: 20px;
  padding-left: 10px;
  border-left: 4px solid #dc4b45;
}

/* Referenzen - Kachel Hover-Effekt */
.referenz-item:hover {
  transform: translateY(-5px);
  /* Kachel hebt sich leicht */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Stärkerer Schatten */
}

/* Referenzen - Titel */
.referenz-item h3 {
  font-size: 1.5rem;
  /* Größere Schrift für Titel */
  color: #283949;
  /* Dunkelblauer Text */
  margin-bottom: 10px;
  /* Abstand nach unten */
}

.referenz-item img {
  width: 100%;
  /* Bild füllt die gesamte Breite des Containers */
  height: 100%;
  /* Bild füllt die gesamte Höhe des Containers */
  object-fit: cover;
  /* Bild wird zugeschnitten, um das Seitenverhältnis zu erhalten */
  overflow: hidden;
  /* Verhindert, dass das Bild den Container verlässt */
  border-radius: 8px;
  /* Optional: Abgerundete Ecken */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Optional: Schatten für das Bild */
}

/* Referenzen - Text */
.referenz-item p {
  font-size: 1rem;
  /* Angenehme Schriftgröße */
  color: #333;
  /* Dunkler Text */
  line-height: 1.6;
  /* Zeilenhöhe für bessere Lesbarkeit */
}

#impressum h2 {
  margin-top: 100px;
  margin-left: 20px;
  padding-left: 10px;
  border-left: 4px solid #dc4b45;
}

.impressum-container {
  font-family: "No-1987", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px;
  /* Äußerer Abstand */
}

.impressum-container p {
  margin-bottom: 15px;
}

.impressum-container strong {
  color: #283949;
  font-weight: bold;
}

.datenschutz-container {
  font-family: "No-1987", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px;
  /* Äußerer Abstand */
}

.datenschutz-container p {
  margin-bottom: 15px;
}

#datenschutz h2 {
  margin-top: 100px;
  margin-left: 20px;
  padding-left: 10px;
  border-left: 4px solid #dc4b45;
}

.datenschutz-container strong {
  color: #283949;
  font-weight: bold;
}