/* Grundlegendes Layout */
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #000000; /* Weißer Hintergrund */
  color: #333333;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert den gesamten Inhalt horizontal */
  justify-content: flex-start;
  min-height: 100vh;
  width: 100vw; /* Setzt die Breite auf 100% des Viewports */
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

/* Header */
header {
  background-color: rgba(0, 0, 0, 0.5);  /* Transparenter schwarzer Hintergrund */
  color: white;
  padding: 2px;
  width: 100%;
  display: flex;
  justify-content: space-between; /* Verteile das Logo, die Navigation und Social Media */
  align-items: center;
  position: fixed; /* Fixiert den Header oben */
  top: 0;
  left: 10px;
  right: 10px;
  z-index: 1000; /* Stellt sicher, dass der Header über anderen Inhalten bleibt */
  transition: background-color 0.3s ease; /* Sanfte Übergangseffekte */
}

/* Logo */
.logo {
  flex-shrink: 0; /* Verhindert, dass das Logo schrumpft */
}

.logo img {
  height: auto;
  max-width: 200px; /* Stelle sicher, dass das Logo maximal 400px breit bleibt */
}

/* Navigation (mittig) */
.nav-wrapper {
  flex-grow: 1; /* Füllt den gesamten verfügbaren Raum */
  display: flex;
  justify-content: center; /* Zentriert die Navigation innerhalb des Containers */
}

.nav-links {
  display: flex;
  gap: 20px;
  justify-content: center; /* Links mittig ausrichten */
}

/* Navigation Links */
nav a {
  color: orange;  /* Orange Farbe für Navigation */
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
}

nav a:hover {
  color: #ff6600;  /* Helleres Orange für Hover-Effekt */
}

/* Social Media Icons */
.social-media {
  display: flex;
  gap: 15px;
  justify-content: flex-end; /* Icons am rechten Rand */
  align-items: center;
  padding-right: 30px; /* Abstand vom rechten Rand (hier angepasst) */
}

/* Social Icons */
.social-icon {
  color: orange;  /* Orange Farbe für Icons */
  font-size: 24px;
  text-decoration: none;
}

.social-icon:hover {
  color: #ff6600;  /* Helleres Orange bei Hover */
}


/* Scroll-Effekt */
body.scrolled header {
  background-color: rgba(0, 0, 0, 0.6);  /* Mehr Transparenz beim Scrollen */
}


/* Hero-Bereich */
.hero {
  background-image: 
     radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), /* Elliptischer Vignetteneffekt */
    url('../images/Wartburgblick.jpg'); /* Beispielbild */
  background-size: cover; /* Deckt den gesamten Bildschirm ab */
  background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
  background-position: center 70%; /* Bild 20% nach unten verschieben */
  height: 100vh; /* Hero-Bereich soll den gesamten Bildschirm abdecken */
  display: flex;
  flex-direction: column;  /* Stapelt die Elemente vertikal */
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  width: 100%;
}

.hero h2 {
  font-size: 3rem;
  margin: 0;
}

.hero p {
  font-size: 1.2rem;
  margin: 10px 0;
}

button {
  background-color: orange; /* Orange Farbe für Buttons */
  color: black;
  padding: 30px 80px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 15px;
  font-weight: bold;
  margin-top: 20px; /* Abstand zwischen dem Text und dem Button */
}

/* Sektionen */
.section {
  padding: 50px 20px;
  text-align: center;
  width: 100%; /* Breite auf 100% des Bildschirms setzen */
  max-width: 100vw; /* Maximale Breite auf die Breite des Viewports begrenzen */
}

.section h2 {
  font-size: 3rem;
  color: white;
  margin-bottom: 20px;
}

.section p {
  font-size: 20px;
  color: white;
}
.section t {
	font-size: 15px;
	color: gray;
}
.section n {
	font-size: 20px;
	color: gray;
	font-weight: bold;
}

footer {
  background-color: #000; /* Schwarzer Hintergrund */
  color: #fff; /* Weiße Schrift */
  padding: 40px 20px; /* Etwas mehr Abstand oben und unten */
  font-family: Arial, sans-serif;
  width: 100%; /* Volle Breite des Containers */
  max-width: 1250px; /* Maximale Breite des Footers auf 1250px setzen */
  margin: 0 auto; /* Footer mittig ausrichten */
}

.footer-content {
  width: 100%; /* Content im Footer nimmt volle Breite des Footers ein */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1; /* Flexibles Layout */
}

.footer-logo {
  width: 220px; /* Größeres Logo */
  margin-bottom: 1px; /* Größerer Abstand zum Slogan */
}

.footer-slogan {
  font-style: italic;
  font-size: 1rem; /* Etwas größere Schrift für den Slogan */
  margin-bottom: 20px; /* Größerer Abstand zum Menü */
}

.footer-menu, .footer-legal, .footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1; /* Flexibles Layout für die Abschnitte */
  margin-top: 10px; /* Leichter Abstand nach oben, um alles zusammenzurücken */
}

.footer-menu h3, .footer-legal h3, .footer-contact h3 {
  font-weight: bold; /* Fett gedruckte Überschriften */
  margin-bottom: 1px;
}

.footer-menu ul, .footer-legal ul {
  list-style-type: none;
  padding: 0;
}

.footer-menu ul li, .footer-legal ul li {
  margin-bottom: 0px;
}

.footer-menu ul li a, .footer-legal ul li a {
  text-decoration: none;
  color: #fff; /* Weiße Links */
}

.footer-menu ul li a:hover, .footer-legal ul li a:hover {
  text-decoration: none;
}

.footer-logo-large {
  display: flex;
  justify-content: flex-end;
  flex: 1; /* Flexibles Layout für das große Logo */
}

.footer-logo-large img {
  width: 150px; /* Größe des größeren Logos */
}

footer hr {
  width: 100%; /* Trennungslinie passt sich der Breite des Footers an */
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #444; /* Graue Trennung */
}

.footer-copyright {
  text-align: left; /* Copyright mittig ausrichten */
  font-size: 14px; /* Schriftgröße anpassen */
  color: #fff; /* Helleres Grau für das Copyright */
  margin-top: 5px;
}

/* Bilder Boxes Service */

 .image-container {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Weniger Abstand zwischen den Bildern */
    margin-top: 20px;
    padding: 0 10%; /* Platz an den Seiten */
  }

  .image-box {
    text-align: center;
    border: 3px solid #C0C0C0; /* Silberfarbener Rahmen */
    border-radius: 20px; /* Abgerundete Ecken */
    padding: 20px;
    background-color: #2e2e2e; /* Leichter Hintergrund für das Bild */
    width: 400px; /* Feste Breite für alle Bilder */
    height: 350px; /* Feste Höhe für alle Boxen */
    margin-top: 10px;
    font-size: 1rem;
    font-weight: bold; /* Fett */
    color: white; /* Weißer Text */
    text-decoration: underline; /* Unterstrichen */
    text-decoration-color: orange; /* Orangefarbene Unterstreichung */
    text-decoration-thickness: 3px; /* Fette Unterstreichung */
    box-sizing: border-box; /* Stellen Sie sicher, dass Padding und Border zur Gesamtgröße zählen */
}


  .image-box img {
    width: 100%; /* Damit die Bilder immer den gesamten Platz der Box einnehmen */
    height: 200px; /* Feste Höhe für alle Bilder */
    object-fit: cover; /* Bilder werden ohne Verzerrung zugeschnitten */
    border-radius: 8px; /* Abgerundete Ecken für das Bild */
  }

/* Container für Services */
.box-container {
  display: flex;
  justify-content: space-around; /* Verteilt die Boxen gleichmäßig */
  gap: 20px; /* Abstand zwischen den Boxen */
  margin-top: 50px;
  padding: 0 5%; /* Platz an den Seiten */
}

/* Jede einzelne Box */
.service-box {
  text-align: left;
  padding: 20px; /* Weniger Abstand im Inneren der Box */
  width: 50%; /* Breite der Box anpassbar */
  font-size: 0.9rem;
  font-weight: normal; /* Fett */
  color: white; /* Weißer Text */
  }
 
/* Stil für die Bilder */
.service-box img {
  width: 100%; /* Bild nimmt die volle Breite der Box ein */
  height: 700px; /* Höhe des Bildes, kann angepasst werden */
  object-fit: contain; /* Bilder werden ohne Verzerrung zugeschnitten */
  border-radius: 8px; /* Abgerundete Ecken für das Bild */
}

/* Container für die Services */
.service-box-container {
  display: flex;
  justify-content: center; /* Boxen horizontal mittig ausrichten */
  gap: 40px; /* Abstand zwischen den Boxen */
  margin-top: 50px;
  padding: 0 10%; /* Weniger Platz an den Seiten */
}

/* Jede einzelne Service-Box */
.service-item {
  text-align: center;
  padding: 20px; /* Etwas mehr Abstand im Inneren der Box */
  width: 25%; /* Breite der Boxen angepasst, damit sie enger zusammenrücken */
  font-size: 12px;
  font-weight: bold;
  color: white; /* Weißer Text */
  background-color: #333; /* Hintergrundfarbe für mehr Kontrast */
  border-radius: 10px; /* Abgerundete Ecken für die Box */
  border: 2px solid #C0C0C0; /* Silberfarbener Rahmen */
  border-radius: 20px; /* Abgerundete Ecken */
  padding: 20px; /* Entfernt überschüssiges Padding */
}

/* Stil für die Bilder in den Boxen */
.service-item img {
  width: 100%;
  height: 300px; /* Anpassung der Bildhöhe */
  object-fit: cover; /* Bilder werden passend zugeschnitten */
  border-radius: 8px; /* Abgerundete Ecken für das Bild */
}

/* Stil für den Kunden-Button */
.kunden  {
  background-color: orange; /* Orange Farbe für Kunden - Buttons */
  color: black;
  padding: 10px 0; /* Nur vertikales Padding für gleiche Höhe */
  font-size: 14px; /* Kleinere Schriftgröße für den Button */
  border: none;
  cursor: pointer;
  border-radius: 15px;
  font-weight: bold;
  margin-top: 10px; /* Abstand zwischen dem Text und dem Button */
  height: 60px; /* Feste Höhe für die Buttons */
  width: 200px; /* Gleiche Breite für beide Buttons */
  display: flex;
  align-items: center; /* Vertikal zentrieren */
  justify-content: center; /* Horizontal zentrieren */
  }

/* Kontaktformular */
.kontaktformular {
    width: 100%;
    max-width: 800px;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.kontaktformular h2 {
    text-align: center;
    font-size: 1.4em;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.input-group {
    flex: 1;
}

label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
    font-size: 0.9em; /* Schriftgröße verkleinert */
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    font-size: 0.8em;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

textarea {
    resize: vertical;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

input[type="checkbox"] {
    margin: 0;
}

button[type="submit"] {
    background-color: orange; /* Schwarz für den Button */
    color: black;
    padding: 15px 40px; /* Verkleinerte Button-Padding */
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 15px;
    font-weight: bold;
    margin-top: 20px;
    width: auto; /* Schmaler machen */
}

button[type="submit"]:hover {
    background-color: darkorange; /* Etwas dunkler beim Hover */
}

/* Impressum und Datenschutz BOX */
.box-wrap {
    width: 80vw;  /* 80% der Bildschirmbreite */
    max-width: 1000px;
    margin: 50px auto;
    background-color: #333;
    padding: 20px;
    border-radius: 20px;
    text-align: left;
    line-height: 1;
    box-sizing: border-box;
}
.wp-block-list {
	color: white;
}

/* Style für die Statusnachricht */
.status-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.status-message.success {
    background-color: #d4edda; /* Helles Grün */
    color: #155724; /* Dunkelgrün */
    border: 1px solid #c3e6cb; /* Grüner Rand */
}

.status-message.error {
    background-color: #f8d7da; /* Helles Rot */
    color: #721c24; /* Dunkelrot */
    border: 1px solid #f5c6cb; /* Roter Rand */
}