* {
    box-sizing: border-box;
}

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

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f4f4;
    line-height: 1.8;
}

a {
    color: #e30613;
    text-decoration: none;
}

a:hover {
    color: #9b040d;
}



footer {
    background-color: #333;
    color: #fff;
    text-align: left;
    padding: 3em;
    bottom: 0;
    width: 100%;
    line-height: 0.8;
    font-size: 14px;
}

footer a {
    color: #fff;
    text-decoration: none;
    padding: 0.5em 0;
    position: relative;
    transition: color 0.3s ease; /* Hover-Effekt hinzufügen */
}

footer a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: transparent; /* Anfangsfarbe des Balkens */
    transform: scaleX(0); /* Balken am Anfang unsichtbar machen */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Übergangseffekt hinzufügen */
}

footer a:hover::before {
    transform: scaleX(1); /* Balken bei Hover anzeigen */
    background-color: white; /* Balkenfarbe bei Hover ändern */
}

footer a:hover {
    color: #e30613; /* Farbe bei Hover ändern */
}


.footer-section {
    float: left;
    width: 33.33%;
    padding: 0 15px;
}

.opening-hours {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.opening-hours strong {
    margin-bottom: 5px; /* Abstand zwischen strong und Tabelle */
	padding: 5px 10px;
}

.opening-hours table {
    width: auto;
}

.opening-hours table td {
    padding: 5px 10px;
}




        

        section#home,
        section#start{
            display: flex;
            padding: 0em;
			margin-top: 10em;
            margin-bottom: 5em;
        }

        .column {
            flex: 1;
            padding: 20px;
            max-width: 40%;
            margin: 1px auto;
        }
	
   
.card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
}
   


   
   .card-svg a, .card-vec a {
    text-decoration: none;
    color: inherit;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
   .card-svg img, .card-vec img {
    width: 250px !important;
    height: auto !important;
    max-width: none !important;
    margin-bottom: 20px;
}
   
		.card-text {
    position: absolute;
    top: 30%; /* Hier kannst du den Wert anpassen, um das Element nach unten zu verschieben */
    left: 50%;
    text-align: center;
    transform: translate(-50%, -150%);
    color: white;
    font-size: 40px;
}
		.card-text a {
    text-decoration: none;
    color: inherit;
    color: inherit;
    font-size: 14px; /* Hier die gewünschte Schriftgröße eintragen */
    display: inline-block;
    padding: 5px 10px; /* Hier die gewünschten Padding-Werte eintragen */
    border-radius: 5px; /* Hier die gewünschte Rundung der Ecken eintragen */
}

.card-svg, .card-vec {
    position: absolute;
    top: 32% !important; /* Global noch höher platziert */
    left: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    width: 600px !important;
    height: auto !important;
    z-index: 100 !important; /* Niedriger als Navbar, damit es drunter durchscrollt */
    gap: 40px !important; /* Deutlicher Abstand */
    transition: transform 0.3s ease;
}
		.card-vec a {
    text-decoration: none;
    color: inherit;


		}
   		.card-text strong {
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 2); /* Schlagschatten hinzufügen */
}


.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.gallery-container h1 {
    margin-bottom: 20px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.gallery-item {
    overflow: hidden;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: transform 0.3s ease;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 Aspect Ratio */
}

.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-item img:hover {
    transform: scale(1.1);
}

/* Reservieren button startseite */
.reservieren-button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px; /* Positiver Abstand statt negativem Überzug */
    background-color: #e30613;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.reservieren-button:hover {
	text-decoration: none;
    background-color: #9b040d;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
/* Download button getränke */
.download-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e30613;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.download-button:hover {
		text-decoration: none;	
    background-color: #9b040d;
	color: #fff;
}
.card-text strong {
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 1); /* Schlagschatten hinzufügen */
}




input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 16px; /* Erhöhte Padding für höhere Eingabefelder */
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Inklusive Padding und Rand */
}

/* Submit-Button reservierung */
input[type="submit"] {
    display: inline-block;
    padding: 12px 20px;
    margin-top: 1em;
    background-color: #e30613;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
    text-decoration: none;   
    background-color: #9b040d;
    color: #fff;
}


/* VEranstaltungen */

	.bodVeranstaltungen,
	.bodReservierung{

		   background-color: #0d0d0d;
	}
	
		.bodGeb{

		   background-color: #0d0d0d;
		   p {
					color: white;
				}
			strong{
				color: white;
			}				
		   

			h2{
				color: white;
			}
	}



    #events {
        margin-bottom: 10em;
		margin-top: 10em;
    }

    .container {
        display: block;
		
    }

.event {
    color: white;
    background-color: #141414;
    border-radius: 10px;
    box-shadow: 0 12px 12px rgba(0, 0, 0, 0.1);
    padding: 10px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    max-width: 400px;
    margin: 0 auto; /* Zentriert das Element horizontal */
    margin-bottom: 1em;
}

.event:hover {
    transform: translateY(-10px);
}

.event img {
    width: 100%;
    height: auto;
}

.event h2 {
    margin-top: 10px;
    font-size: 20px;
}





		.card-text strong {
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 1); /* Schlagschatten hinzufügen */
}

		.card-text p {
		text-shadow: 4px 4px 4px rgba(0, 0, 0, 1); /* Schlagschatten hinzufügen */
}


	
.kicker-image {
    width: 49%; /* Passe die Breite nach Bedarf an */
    height: auto; /* Behalte das Seitenverhältnis bei */
	border-radius: 30px; /* Füge abgerundete Ecken hinzu, passe den Wert nach Bedarf an */
	margin-bottom: 1em;
}
	
	.get-image {
	margin-top: 1em;
    width: 30%; /* Passe die Breite nach Bedarf an */
    height: auto; /* Behalte das Seitenverhältnis bei */
	border-radius: 20px; /* Füge abgerundete Ecken hinzu, passe den Wert nach Bedarf an */
	
}
	.get-imagel {
	margin-bottom: 3em;
    width: 100%; /* Passe die Breite nach Bedarf an */
    height: auto; /* Behalte das Seitenverhältnis bei */
	border-radius: 20px; /* Füge abgerundete Ecken hinzu, passe den Wert nach Bedarf an */
}

	.imp-image {
	Position: absolute;
    width: 10%; /* Passe die Breite nach Bedarf an */
    height: auto; /* Behalte das Seitenverhältnis bei */
	border-radius: 20px; /* Füge abgerundete Ecken hinzu, passe den Wert nach Bedarf an */
	left: 8%;
	top: 95%;
}	
		


#dataprot {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 5em auto;
    max-width: 800px;
}


.Gebflyer {
	margin-top: 15px; /* Platzierung einstellen */
	max-width: 800px; /* Maximale Breite des Flyers */
    max-height: auto; /* Maximale Höhe des Flyers */
	position: relative; /* Positionierung für das Pseudo-Element */
    display: inline-block; /* Damit das Pseudo-Element die Größe des Bildes annimmt */
}

.flyer {
	
	display: block; /* Damit das Bild die Größe des Elternelements annimmt */
    width: 100%;
    height: auto;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; /* Füge box-shadow zur Transition hinzu */
}

.Gebflyer:hover .flyer {
    transform: scale(1.05); /* Vergrößert das Bild um 10% */
    opacity: 0.8; /* Ändert die Transparenz auf 80% */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Füge Schlagschatten hinzu */
}





@media only screen and (min-width: 1101px) {


 nav, header {
            background-color: #444;
            color: #fff;
            text-align: right;
            padding: 1em;
			
			
        }
		
		
		
/* .card-svg definition moved and unified above at line 145 to prevent duplication */

.symballe36,
.symballe35,
.symballe34,
.symballe33,
.symballe32,
.symballe31,
.symballe26,
.symballe25,
.symballe24,
.symballe23,
.symballe22,
.symballe21,
.symballe,
.symballe2,
.symballe3,
.symballe4,
.symballe5,
.symballe6{
    position: absolute;
    width: 100px; /* Hier die Breite der Bilder anpassen */
    height: auto; /* Höhe automatisch anpassen */
    z-index: 999; /* Stellen Sie sicher, dass die Bilder über anderen Inhalten liegen */
	    background-color: transparent;
    border: none;
}


.symballe6,
.symballe5,
.symballe4,
.symballe3,
.symballe2,
.symballe {
    left: 10%; /* Hier die gewünschte Position von links einstellen */
}
.symballe26,
.symballe25,
.symballe24,
.symballe23,
.symballe22,
.symballe21 {
    left: 20%; /* Hier die gewünschte Position von links einstellen */
}
.symballe36,
.symballe35,
.symballe34,
.symballe33,
.symballe32,
.symballe31 {
    left: 30%; /* Hier die gewünschte Position von links einstellen */
}


.symballe,
.symballe21,
.symballe31 {
	top: 70%; /* Hier die gewünschte Position von oben einstellen */
}

.symballe32,
.symballe22,
.symballe2 {
    top: 125%; /* Hier die gewünschte Position von oben einstellen */
}
.symballe33,
.symballe23,
.symballe3 {
    top: 180%; /* Hier die gewünschte Position von oben einstellen */
}
.symballe34,
.symballe24,
.symballe4 {
    top: 235%; /* Hier die gewünschte Position von oben einstellen */
}

.symballe35,
.symballe25,
.symballe5 {
    top: 290%; /* Hier die gewünschte Position von oben einstellen */
}

.symballe36,
.symballe26,
.symballe6 {
    top: 345%; /* Hier die gewünschte Position von oben einstellen */
	
	
}


footer {
            background-color: #333;
            color: #fff;
            text-align: left;
            padding: 3em;
            bottom: 0;
            width: 100%;
            line-height: 0.8;
            font-size: 14px;
			
        }

		footer a {
    color: #fff;
    text-decoration: none;
    padding: 0.5em 0;
    position: relative;
    transition: color 0.3s ease; /* Hover-Effekt hinzufügen */
}

		footer a::before {
			text-decoration: none;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: transparent; /* Anfangsfarbe des Balkens */
    transform: scaleX(0); /* Balken am Anfang unsichtbar machen */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Übergangseffekt hinzufügen */
}

		footer a:hover::before {
			text-decoration: none;
    transform: scaleX(1); /* Balken bei Hover anzeigen */
    background-color: white; /* Balkenfarbe bei Hover ändern */
}

		footer a:hover {
			text-decoration: none;
    color: #e30613; /* Farbe bei Hover ändern */
}


#video {
	padding: 1em;
    max-width: 100%;
    margin: auto;
	display: inline-block;
	 margin-left: 11em; /* Hier kannst du den Abstand nach Bedarf anpassen */
}

video {
    width: 100%;
    height: auto;
		border-radius: 20px; /* Füge abgerundete Ecken hinzu, passe den Wert nach Bedarf an */
	
}




section#location {
float: left; 
width: 33.33%; 
margin-top: 10em; 
margin-left: 5em; 
margin-right: 5em;
}

		section#contact{
            padding: 0em;
			margin-top: 20em;
            margin-bottom: 15em;
			line-height: 1.2;
			display: flex; 
			justify-content: space-between; 

		}
		
		
.contact-section {
    display: flex;
				margin-top: 10em; 
			margin-bottom: 20em;
}

.contact-column {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	margin-left: 10em; 
	margin-bottom: 10em;
}

.contact-column > div {
    margin-bottom: 20px;
}

.contact-column h2 {
    font-size: 1.5rem;
}



.GebDom1 img {
    width: auto;
    height: 500px;
}

.GebDom1 {
    position: absolute;
    right: 5em; /* Abstand vom rechten Rand der Seite */
    top: 50em; /* Abstand vom unteren Rand der Seite */
}

.ResDom1 img,
.ResDom2 img {
    width: auto;
    height: 600px;
}

.ResDom1 {
    position: absolute;
    right: 5em; /* Abstand vom rechten Rand der Seite */
    top: 55em; /* Abstand vom unteren Rand der Seite */
}
.ResDom2 {
    position: absolute;
    left: 5em; /* Abstand vom rechten Rand der Seite */
    top: 55em; /* Abstand vom unteren Rand der Seite */
}



.karDom1 img,
.karDom2 img {
    width: auto;
    height: 350px;
}


.karDom1 {
    position: absolute;
    right: 5em; /* Abstand vom rechten Rand der Seite */
    top: 50em; /* Abstand vom unteren Rand der Seite */
}
.karDom2 {
    position: relative;
    left: 20em; /* Abstand vom rechten Rand der Seite */
    top: 0em; /* Abstand vom unteren Rand der Seite */
	margin-bottom: 0em;
}



/* Text-based logo CSS removed - using PNG logo now */


		.topnav {
    display: none;
  }

        nav {
            display: flex;
            justify-content: space-between;
            background-color: #444;
            padding: 1em;
            position: fixed;
            display: inline-block;
            width: 100%;
            top: 0;
            z-index: 2000 !important;
            left: 0;
        }
        nav a {
            font-size: 18px;
            color: #fff;
            text-decoration: none;
            padding: 1em;
            margin: 0 0.5em;
            display: inline-block;
            position: relative;
            transition: color 0.3s ease, box-shadow 0.3s ease;
        }
        nav a:first-child {
            font-size: 20px;
            align-items: left;
            display: flex;
            position: fixed;
            transition: color 0.3s ease, box-shadow 0.3s ease;
            width: auto;
            height: auto;
        }
        
nav a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
nav a:hover {
	text-decoration: none;
    color: #e30613; /* Textfarbe bei Hover ändern */
}
nav a:hover::before {
    transform: scaleX(1); /* Balken bei Hover anzeigen */
}
nav .nav-link {
color: #fff;
            text-decoration: none;
            padding: 1em;
            margin: 0 0.5em;
            display: inline-block;
			position: relative;
			transition: color 0.3s ease, box-shadow 0.3s ease;
}
nav .nav-link:hover {
    color: #e30613; /* Beim Hover wird es rot */
}

.pcnavsvg {
    position: absolute;
    color: white;
    transition: transform 0.3s ease; /* Übergangseffekt für die Transformation */
    top: 5px; /* Anpassen der vertikalen Position */
    left: 5px; /* Anpassen der horizontalen Position */
    width: 80px; /* Anpassen der Breite */
    height: 80px; /* Anpassen der Höhe */
    z-index: 2001 !important; /* Höchste Ebene für das Eck-Logo */
    transition: fill 0.3s ease; /* Übergangseffekt für die Farbe */
}
.pcnavsvg a {
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.pcnavsvg svg, .pcnavsvg img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    transition: transform 0.3s ease; /* Übergangseffekt für die Skalierung */
}

.pcnavsvg:hover svg, .pcnavsvg:hover img {
    transform: scale(1.1); /* Skalierung beim Überfahren */
}


.card {
    width: 100% !important;
    max-width: 100vw !important;
    height: 540px;
    overflow: hidden !important;
}

.column {
    flex: 1;
    padding: 20px;
    max-width: 50%; /* Hier die maximale Breite festlegen */
    margin: 1px auto;
}

#col1home {
    max-width: 40%; /* Hier die maximale Breite festlegen */

}

#col2home {
    max-width: 50%; /* Hier die maximale Breite festlegen */
}

#getcol1 h2::after,
#col1home h2::after,
#gebcol h2::after,
#kick1home h2:after{
    content: '';
    display: block;
    width: 30%; /* Breite auf 100% setzen */
    height: 3px;
    background-color: #e30613; /* Farbe auf Rot setzen */
    margin-top: 5px; /* Platzierung einstellen */

	
}
#getcol1 p::after,
#col1home p:after,
#gebcol p:after,
#kick1home p:after {
	content: '';
    display: block;
    width: 30%; /* Breite auf 100% setzen */
    height: 3px;
    background-color: #e30613; /* Farbe auf Rot setzen */
    margin-top: 10px; /* Platzierung einstellen */
}
		section#gebhome{
            display: flex;
            padding: 0em;
			margin-top: 15em;
            margin-bottom: 25em;
        }


#gebcol{
    max-width: 40%; /* Hier die maximale Breite festlegen */
}
#gebcol2{
	max-width: 100%;
}
#gebcol2 .column{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	margin-left: 0em;
}

#getcol1,
#kick1home{
    max-width: 40%; /* Hier die maximale Breite festlegen */

}


#getcol2{
	max-width: 100%;
    float: left; /* Element nach rechts ausrichten */
	margin-left: 15em;
	}
	
#kick2home {
	max-width: 100%;
    float: left; /* Element nach rechts ausrichten */
	margin-left: 15em;
	
}





.event p.description {
    position: absolute;
    top: calc(5% + 0px);
    left: calc(100% + 10px);
    background-color: #141414;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 12px 12px rgba(0, 0, 0, 0.1);
    width: 300px;
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 1s ease; /* Übergangseffekt für die Opazität */
}

.event:active p.description,
.event:focus-within p.description,
.event:hover p.description {
    opacity: 1; /* Einblenden */
}


}

@media (max-width: 1592px) {
    .ResDom1,
    .ResDom2 {
        display: none;
    }
}


@media only screen and (max-width: 1100px) {
 	 
body {
overflow-x: hidden;
}

.card-text {
        margin-top: 3em; /* Ändere den Abstand nach Bedarf */
    }


#video {
	padding: 1em;
    max-width: 100%;
    margin: auto;
	display: inline-block;
}

video {
    width: 100%;
    height: auto;
		border-radius: 20px; /* Füge abgerundete Ecken hinzu, passe den Wert nach Bedarf an */
	
}

	#home {
        flex-direction: column;
        align-items: center;
    }   
	
	

	
#getcol2 {
    max-width: 100%;
    text-align: center; /* Zentriert den Text horizontal */
    flex-direction: row;
    align-items: center;
}

#kick2home {
    max-width: 100%;
    text-align: center; /* Zentriert den Text horizontal */
    flex-direction: row;
    align-items: center;	
	
}
.Angebote {
    margin: 0 auto; /* Auto margin left and right to center the element */
    width: 50%; /* Adjust the width as needed */
}




    #contactimp {
        display: flex;
        flex-direction: column;
        align-items: center;
		
    }

    #contactimp h2 {
        text-align: center;
		word-wrap: break-word;
    }
	    #contactimp p {
        text-align: center;
    }

section#location {
        float: none; /* Kein Float für Mobilgeräte */
        width: auto; /* Automatische Breite für Mobilgeräte */
        margin: 10em 0em; /* Margin anpassen */
    }


    section#contact {
        display: flex;
        flex-direction: column;
        align-items: center;
		text-align: center;
    }
	.imp-image,
.symballe36,
.symballe35,
.symballe34,
.symballe33,
.symballe32,
.symballe31,
.symballe26,
.symballe25,
.symballe24,
.symballe23,
.symballe22,
.symballe21,
.symballe,
.symballe2,
.symballe3,
.symballe4,
.symballe5,
.symballe6,	
.GebDom1,
.karDom1,
.karDom2,
.ResDom1,
.ResDom2
{
display: none;
}
	

  /* Verstecke die normale Navigation bei kleineren Bildschirmbreiten */
  .PCnav {
    display: none;
  }

  /* Aktiviere die mobile Navigation bei kleineren Bildschirmbreiten */



	
	.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
    overflow: hidden;
    background-color: #333;
            padding: 0em;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 2000 !important;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
    color: #fff;
    padding: 1em;
    text-decoration: none;
    font-size: 17px;
    display: block;
    position: relative;
    transition: color 0.3s ease, box-shadow 0.3s ease;
}

.topnav a.icon {
    background: transparent;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}


.topnav a:hover {
	text-decoration: none;
	background-color: transparent;
	color: #e30613;
}


.active {
  background-color: #e30613;
  color: white;
}
	
	.card{
		width:auto;
		height:600px;
   }

    .column {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 100%; /* Änderung hier */
        margin: 0 auto; /* Zentriert das Element horizontal */
	
    }
	
	
    .card-svg, .card-vec {
        width: 90% !important;
        top: 25% !important; /* Auf Mobile noch etwas höher, da weniger Platz */
        gap: 20px !important; /* Kleinerer Abstand auf Mobile */
    }

    .card-svg img, .card-vec img {
        width: 180px !important; /* Kleineres Logo auf Mobile */
    }

	.card-svg.open {
        opacity: 0;
    }
#getcol1	h2:after,
#gebhome h2:after,  	
#col1home h2::after {
    content: '';
    display: block;
    width: 50%;
    height: 3px;
    background-color: #e30613;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    left: 50%;
}
#kick1home p::after,
#col1home p::after {
    content: '';
    display: block;
    width: 50%;
    height: 3px;
    background-color: #e30613;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    left: 50%;
}

.p.description {
    position: absolute;
    top: calc(5% + 0px);
    left: calc(100% + 10px);
    background-color: #141414;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 12px 12px rgba(0, 0, 0, 0.1);
    width: 300px;
    opacity: 1; /* Standardmäßig unsichtbar */
    transition: opacity 1s ease; /* Übergangseffekt für die Opazität */
}







    .footer-section {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        margin-bottom: 30px;
        padding: 0;
    }

    footer {
        padding: 2em 1em;
    }
}