@charset "utf-8";
/* CSS Document */
/* Allgemeine Stile */


body {
    margin: 0; /* Entfernt alle Ränder des Body-Elements */
    font-family: Arial, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.floating-home {
    position: fixed; /* Der Button bleibt an einer festen Position */
    bottom: 20px; /* Abstand vom unteren Rand */
    right: 20px; /* Abstand vom rechten Rand */
    background-color: #8B4513; /* Hintergrundfarbe: Braun */
    border-radius: 50%; /* Runde Form */
    padding: 15px; /* Innenabstand für Größe */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* Schatten für 3D-Effekt */
    z-index: 1000; /* Über andere Elemente legen */
}

.floating-home a {
    color: white; /* Textfarbe */
    text-decoration: none; /* Kein Unterstrich */
    font-size: 20px; /* Schriftgröße */
    display: block; /* Link als Blockelement */
    text-align: center; /* Text zentrieren */
}

.floating-home:hover {
    background-color: #FFCC00; /* Farbe ändern bei Hover */
    transition: background-color 0.3s ease; /* Weicher Übergang */
}


/* Klasse für den umgebenden Container */
.custom-list-container {
    margin: 0 auto; /* Zentriere den Container innerhalb des verfügbaren Raums */
    max-width: 800px; /* Gleiche Breite wie der übrige Text */
    padding: 20px; /* Innenabstand für einen angenehmen Abstand zum Text */
    text-align: left; /* Text linksbündig ausrichten */
}

/* Klasse für die Liste */
.custom-list {
    list-style-type: disc; /* Standard-Bullet-Punkte */
    list-style-position: outside; /* Bullets außerhalb des Textbereichs */
    margin: 20px 0; /* Gleicher vertikaler Abstand wie bei normalen Absätzen */
    padding-left: 20px; /* Innenabstand für den Text */
    line-height: 1.8; /* Zeilenhöhe für bessere Lesbarkeit */
}

.custom-list li {
    margin-bottom: 5px; /* Verringert den Abstand zwischen den Punkten */
    line-height: 1.4; /* Optional: Passt die Zeilenhöhe an, um den Text kompakter wirken zu lassen */
}



 /* Container auf volle Breite setzen */
    .video-container {
        position: relative;
        width: 100vw; /* Volle Bildschirmbreite */
        max-width: 100%;
        height: auto;
        cursor: pointer;
    }

    /* Video auf volle Breite setzen */
    .video-container video {
        width: 100%;
        height: auto;
        display: none; /* Erst anzeigen, wenn Play gedrückt wird */
    }

    /* Startbild auf volle Breite setzen */
    .video-container img {
        width: 100%;
        height: auto;
        display: block;
        cursor: pointer;
    }

    /* Play-Button Design */
    .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        border: none;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        font-size: 24px;
        text-align: center;
        line-height: 80px;
        cursor: pointer;
    }

    /* Play-Button Hover Effekt */
    .play-button:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

/* Header */
header {
	background-color: #8B4513; /* Braun */
    padding: 10px 20px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    height: 50px;
}

.menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
	gap: 10px;
}

.menu li {
    margin: 0 15px;
}

.menu li a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

nav ul {
    white-space: nowrap; /* Verhindert das Umbruchverhalten */
    overflow-x: auto; /* Ermöglicht horizontales Scrollen, wenn nötig */
    display: flex; /* Stellt sicher, dass die Menüpunkte in einer Zeile bleiben */
}

.menu li a:hover {
    text-decoration: underline;
}


/* Responsive Design */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column; /* Logo und Menü stapeln sich */
        gap: 20px; /* Abstand zwischen Logo und Menü */
		align-items: center;
    }

	
	/* 
    .menu {
        flex-direction: column; /* Menüeinträge untereinander anordnen */
        width: 100%; /* Menü füllt die Bildschirmbreite */
        text-align: center; /* Zentriert die Links */
    }
*/


    .menu li {
        margin: 10px 0; /* Abstand zwischen den Menüpunkten */
    }
}



/* Entfernt die Standard-Punkte (Bullets) */
ul {
    padding-left: 1em; /* Passt den Abstand links an */
	list-style-type: none;
    padding: 0;
    margin: 0;
	list-style-position: inside; /* Bullets rücken in die Textlinie ein */
}

li {
    margin: 0; /* Entfernt zusätzlichen Abstand zwischen den Listenelementen */
    padding: 0;
}


/* Hero-Bereich */
.hero-section {
    background-color: #FFCC00; /* Rapsgelb */
    text-align: center;
}

.hero-image {
    width: 100%;
    height: auto;
}

/* Über uns */
.about-section {
    background-color: #F5F5DC; /* Beige */
    padding: 20px;
    text-align: center;
}

.about-section h2 {
    color: #8B4513; /* Braun */
}

.about-section h1 {
    color: #8B4513; /* Braun */
}

.about-section p {
    max-width: 800px;
    margin: 0 auto;
}

.responsive-image {
    width: 100%; /* Bild füllt die Breite des Containers */
    height: auto; /* Höhe passt sich proportional zur Breite an */
    display: block; /* Verhindert Inline-Darstellung und fügt saubere Ränder hinzu */
}




/* Galerie */
.gallery-section {
    background-color: #FFFFFF; /* Weiß */
    padding: 20px;
    text-align: center;
}

.gallery {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px;
}

.gallery img {
    height: 250px;
    border-radius: 5px;
}

/* Details */
.details-section {
    background-color: #FFCC00; /* Rapsgelb */
    padding: 20px;
    text-align: center;
}

.details-section h2 {
    color: #8B4513; /* Braun */
}

.details-section h1 {
    color: #8B4513; /* Braun */
}

.details-section p {
    max-width: 800px;
    margin: 0 auto;
}

/* Footer */
footer {
    background-color: #8B4513; /* Braun */
    color: white;
    padding: 20px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Wichtig: Am unteren Rand ausrichten */
    gap: 20px;
}

.impressum {
    text-align: right;
    display: flex;
    align-items: flex-end;
}

/* Dezentere Farbe für den Link */
.impressum-link {
    color: #b36b3d; /* etwas heller als vorher */
    font-size: 14px;
    text-decoration: none;
}

.impressum-link:hover {
    color: #a0522d; /* Heller bei Hover */
    text-decoration: underline;
}




.address h3 {
    margin-top: 0;
}



.arrow i {
    font-size: 1.8rem; /* Schriftgröße der Icons */
    color: white; /* Icon-Farbe */
}

body {
            margin: 0;
            font-family: Arial, sans-serif;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .floating-arrows {
            position: relative;
            height: 100%;
        }

        .arrow {
            position: fixed;
            bottom: 20%; /* Position im unteren Drittel */
            width: 50px;
            height: 50px;
            background-color: #8B4513; /* Wurzelbraun */
            color: white; /* Textfarbe */
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%; /* Runde Form */
            text-decoration: none; /* Keine Unterstreichung */
            font-size: 2rem; /* Schriftgröße */
            transition: all 0.3s ease; /* Sanfter Übergang bei Hover */
        }

        .arrow:hover {
            background-color: #5E321E; /* Dunkleres Wurzelbraun bei Hover */
        }

        .arrow.left {
            left: 20px; /* Abstand vom linken Rand */
        }

        .arrow.right {
            right: 20px; /* Abstand vom rechten Rand */
        }

        .arrow i {
            font-size: 1.8rem; /* Größe der Icons */
        }

		
		/* Zentrierter, responsiver Video-Bereich mit max. Breite */
		.video-wrapper {
			max-width: 1200px;
			width: 100%;
			margin: 0 auto; /* Zentriert den Wrapper */
		}

		/* Container im 16:9-Format */
		.video-container {
			position: relative;
			width: 100%;
			padding-top: 56.25%; /* 16:9 Verhältnis */
			background-color: black;
			overflow: hidden;
		}

		/* Bild und Video füllen Container */
		.video-container img,
		.video-container video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		/* Nur das Video anfangs ausblenden */
		.video-container video {
			display: none;
		}

		/* Play-Button Styling */
		.play-button {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: rgba(0, 0, 0, 0.6);
			color: white;
			border: none;
			border-radius: 50%;
			width: 80px;
			height: 80px;
			font-size: 24px;
			text-align: center;
			line-height: 80px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

		.play-button:hover {
			background-color: rgba(0, 0, 0, 0.8);
		}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 20px;
}

.language-switch {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flag-icon {
    width: 30px;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.flag-icon:hover {
    transform: scale(1.1);
}

/* Tabelle visuell gestalten */
.responsive-table {
    width: 100%;
    border-collapse: collapse; /* Entfernt doppelte Ränder */
    margin: 20px 0;
    background-color: #fff; /* Heller Hintergrund */
    border: 1px solid #ccc; /* äußerer Rahmen */
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* leichter Schatten für Tiefe */
}

/* Tabellenkopf */
.responsive-table thead {
    background-color: #f4e8d8; /* leichtes Beige passend zum Stil */
}

.responsive-table th,
.responsive-table td {
    border: 1px solid #ccc; /* Zellenumrandung */
    padding: 12px 15px; /* Innenabstand */
    text-align: left;
    vertical-align: top;
}

/* Alternierende Zeilenfarbe */
.responsive-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.table-wrapper {
  overflow-x: auto;       /* Ermöglicht horizontales Scrollen */
  -webkit-overflow-scrolling: touch; /* Weiches Scrollen auf iOS */
}

.responsive-table {
  min-width: 600px;       /* Oder mehr, je nach Inhalt */
}

/* Bilder */
.responsive-img,
.responsive-image{
  display:block;
  width:100%;
  height:auto;
  max-width:900px;
  margin:0 auto;
}
.smaller-img{
  max-width:350px;
  margin:0 auto;
  display:block;
}