/* abel-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/abel-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* amatic-sc-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/amatic-sc-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* raleway-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



	
body {
    background-image: url('images/top_image.jpg'); /* Pfad zum Bild */
    background-size: cover; /* Mischung aus contain und cover */
    background-repeat: no-repeat; /* Wiederholung des Hintergrundbilds deaktivieren */
    background-attachment: fixed; /* Fixieren des Hintergrundbilds (optional) */
    background-position: top center; /* Bild oben in der Mitte positionieren */
    margin: 0; /* Entfernt den Körperrand */
    padding: 0;
    display: flex;
    flex-direction: column; /* Spaltenlayout für den gesamten Inhalt */
    align-items: center; /* Horizontal zentrierte Ausrichtung des Inhalts */
    justify-content: flex-start; /* Vertikal oben ausgerichtete Inhalte */
    height: 100vh; /* Volle Bildschirmhöhe für die zentrierte Ausrichtung */
    background-color: rgba(240, 240, 240, 0.8); /* Transparenter Hintergrund */
    color: black; /* Textfarbe */
	font-family: 'Raleway';
	font-size: calc(16px + (24 - 14) * ((100vw - 480px) / (1600 - 480)));
}
/*
@media (max-width: 480px) {
    body {
        background-size: contain;
    }
}
*/



.header {
    max-width: 1100px; /* Maximale Breite des Headers */
    margin: 0 auto; /* Zentriert den Header horizontal */
    display: flex;
    align-items: center; /* Vertikal zentrierte Ausrichtung */
    justify-content: space-between; /* Platz zwischen Logo und Navigation */
    padding: 20px; /* Innenabstand für den Header */
}

.logo {
    width: 30%; /* Breite des Logos (30% der Header-Breite) */
    max-width: 1100px; /* Maximale Breite für das Logo */
	text-align: left;
	align: left;
	
}

.navigation {
    width: calc(70% - 20px); /* Breite der Navigation (70% - Abstand) */
    /* Der Abstand ist 20px (padding des Headers) */
    text-align: center; /* Rechtsbündige Ausrichtung der Navigation */
	font-family: 'Raleway', Arial;
}
	
	
        /* CSS-Stylesheet für den Button */
        .button {
          /*  background-color: #333; /* Anthrazit-Hintergrund */ */
		    font-family: 'Raleway', Arial;
            border: none;
            color: white; /* Textfarbe: Weiß */
            padding: 10px 10px; /* Anpassen der Größe nach Bedarf */
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 22px;
            border-radius: 0; /* Keine runden Ecken */
            position: relative;
            overflow: hidden; /* Versteckt den überlappenden Text */
            z-index: 1; /* Stelle sicher, dass der Text über dem Hintergrund liegt */
            cursor: pointer; /* Zeige die Handcursor auf Hover */
			
			@media (max-width: 480px) {
                font-size: 16px;
				padding: 5px 5px; /* Anpassen der Größe nach Bedarf */
			}
			
        }

        /* Hintergrund für den Hover-Effekt */
        .button::after {
		    font-family: 'Raleway', Arial;
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 100%;
            background-color: white; /* Weißer Hintergrund beim Hover */
            opacity: 0.2; /* 20% Transparenz */
            transition: width 0.3s ease;
            z-index: -1;
        }

        /* Mouse-Over-Effekt */
        .button:hover::after {
            width: 100%;
        }

        /* Weitere Stile, die du möglicherweise hinzufügen möchtest */
        .button:focus {
            outline: none; /* Entfernt den Fokus-Rahmen */
        }

        .button:active {
            transform: translateY(2px); /* Leichte Verschiebung beim Klicken */
        }
		

		
.white-box {
    background-color: rgba(255, 255, 255, 0.9); /* Weiß mit 90% Transparenz */
    box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.5); /* Dunklerer Schatten */
    max-width: 1100px; /* Maximalbreite von 1100 Pixeln */
    margin: 0 auto; /* Zentriert die Box horizontal */

    /* Standard-Padding für Browserfensterbreiten über 480px */
    padding-top: 2%;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 5%;

    /* Media Query für Bildschirmbreiten kleiner als 480px */
    @media screen and (max-width: 480px) {
        border-radius: 0; /* Keine runden Ecken */
        box-shadow: none; /* Kein Schatten */
        max-width: none; /* Breite bis zum Rand */

        /* Reduziert das Padding auf 10px für Browserfenster unter 480px */
        padding: 10px;
    }
}

/* Standard-Stil für die navi-box */
.navi-box {
    background-color: rgba(17, 176, 34, 0.9);
    max-width: 1100px; /* Maximalbreite von 1100 Pixeln */
    margin: 0 auto; /* Zentriert die Box horizontal */
    text-align: center;
    padding: 15px; /* Standard-Padding für Browserfensterbreiten über 480px */

    /* Stil für das Fixieren am oberen Rand */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/* Media Query für Bildschirmbreiten kleiner oder gleich 480px */
@media screen and (max-width: 480px) {
    /* Reduziert das Padding auf 10px für Browserfenster unter 480px */
    .navi-box {
        padding: 5px;
        border-radius: 0; /* Keine runden Ecken */
        box-shadow: none; /* Kein Schatten */
        max-width: none; /* Breite bis zum Rand */
    }
}



.navi-box2 {
    background-color: rgba(17,176,34, 0.9);
	width: 95%;
    max-width: 1000px; /* Maximalbreite von 1100 Pixeln */
    margin: 0 auto; /* Zentriert die Box horizontal */
	text-align: center;
    box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.5); /* Dunklerer Schatten */

    /* Standard-Padding für Browserfensterbreiten über 480px */
    padding: 15px;

    /* Media Query für Bildschirmbreiten kleiner als 480px */
    @media screen and (max-width: 480px) {
        border-radius: 0; /* Keine runden Ecken */
        box-shadow: none; /* Kein Schatten */
        max-width: none; /* Breite bis zum Rand */

        /* Reduziert das Padding auf 10px für Browserfenster unter 480px */
        padding: 10px;
    }
}


.logo-box {
	width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0px;
    text-align: left !important; /* Container links ausrichten */

}

/* Bild innerhalb der .logo-box anpassen */
.logo-box img {
    display: block;
    margin: 0; /* Alle Bildmargen entfernen */
    max-width: 100%; /* Bild auf Container-Breite anpassen */
    height: auto; /* Verhindert ein unproportionales Skalieren */
}


hr {
    border: none; /* Keine sichtbare Linie */
    height: 1px; /* Höhe der Linie (kann angepasst werden) */
    background: linear-gradient(to right, transparent, #000, transparent); /* Erzeugt den gewünschten Effekt */
    margin: 10px 0; /* Abstand über und unter der Linie */
}

h1 {
  font-family: "Amatic SC";
  font-size: 2.0em;
  padding-top: 0px;
  padding-left: 33px;
  padding-right: 33px;
  text-align: center;
}

/* style.css */

p {
  font-size: 1.0em;
}

/* CSS für Formularfelder ohne Rahmen */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  border: none; /* Kein Rahmen */
  font-family: 'Raleway';
  font-size: 1.0em; /* Schriftgröße 1.0em */
  background-color: rgba(17, 176, 34, 0.1); /* Hintergrundfarbe mit Transparenz */
  padding: 4px; /* Innenabstand für bessere Lesbarkeit anpassen */
}

/* CSS für den Submit-Button */
input[type="submit"] {
  background-color: rgba(17, 176, 34, 0.7); /* Hintergrundfarbe mit Transparenz */
  font-family: 'Raleway';
  font-size: 1.0em; /* Schriftgröße 1.0em */
  border: none; /* Kein Rahmen */
  color: black; /* Textfarbe für den Submit-Button */
  cursor: pointer; /* Zeiger als Zeigerform */
  padding: 4px; /* Innenabstand für bessere Lesbarkeit anpassen */
}

/* Optional: Stil für den Fokuszustand (bei Aktivierung des Feldes) hinzufügen */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: none; /* Entfernt den Standard-Fokus-Rahmen */
  border-color: olivegreen; /* Ändert den Rand beim Fokussieren */
}


@media (max-width: 480px) {
	
.container_ueber_uns {
  display: flex;
  flex-direction: column;
  align-items: center;
}
	
  .passbild {
    margin-top: 20px;
    width: 100%;
    max-width: 80%; /* Änderung hier: maximal 80% der Bildschirmbreite */
    height: auto;
    border-radius: 50%;
  }
  
.text_ueber_uns {
  max-width: 100%;
}
  
}

@media (min-width: 481px) {
  .container_ueber_uns {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .passbild {
    margin-top: 20px;
    border-radius: 50%;
    width: 100%;
    max-width: 350px;
    height: auto;
    align-self: flex-start;
  }

  .text_ueber_uns {
    margin-left: 20px; /* oder eine andere geeignete Marge */
    max-width: 50%;
  }
}


    /* Allgemeine Stile */
    .table-container {
      width: 100%;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
    }

    .table-cell {
      box-sizing: border-box;
      border: 0px solid #ddd;
      padding: 20px;
      text-align: center; /* Optional: Zentriere den Inhalt der Zelle */
    }

    /* Bilder innerhalb der Zellen anpassen */
    .table-cell img {
	  width: 100%; 
      max-width: 300px;
      height: auto;
	  padding: 25px;
    }

    /* Tablet und Desktop Stile (über 480 Pixel) */
    @media (min-width: 480px) {
      .table-cell {
        width: 50%; /* Zellen nehmen 50% der Breite in Anspruch */
      }
    }

    /* Mobile Stile (unter 480 Pixel) */
    @media (max-width: 480px) {
      .table-cell {
        width: 100%; /* Zellen nehmen die volle Breite in Anspruch */
      }

    }
	
        /* Gemeinsame Stile für die Bilder */
        .responsive-img {
			width: 100%;
            max-width: 400px;
            height: auto;
            display: block;
            margin: 15 auto; /* Zentrieren der Bilder */
        }

        /* Stile für Bildschirmauflösungen über 480 Pixel */
        @media (min-width: 481px) {
            .image-container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin: 15 auto;
            }
        }