/* === Basis-Layout === */
html {
    background-color: #f0f0f0;
}

body {
    width: 75%;
    margin: 0 auto;
    background-color: white;
    font-family: Arial;
    border: 1pt solid white;
}

	.full-width-banner{
		width: 100%;
	}
	
	.mobile-banner{
		display:none;
	}

/* === Menü und Navigation === */
#menu {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
}

/* Checkbox verstecken */
#menu-toggle {
	display: none;
}

.jvisit{
    float: right;
	width:15%;
}

.main-menu {
    display: flex;
    justify-content: center;
    background-color: #199e3d;
    padding: 0 10px;
    width: auto;
}

/* Desktop: Menü ist horizontal */
ul.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    background-color: #199e3d;
}

ul.main-menu li {
    position: relative;
}

ul.main-menu li a {
    padding: 15px 20px;
	font-weight: bold; /* fett */
    color: white;
    text-decoration: none;
    display: block;
}

ul.main-menu li a:hover {
    background-color: #b3ee3a;
}

/* Submenu */
ul.main-menu li .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #199e3d;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 200px;
    z-index: 1000;
}

ul.main-menu li:hover > .submenu {
    display: block;
}

.main-menu .main-menu-title {
    display: none;
}

/* Burger-Menü im Desktop verstecken */
.menu-icon {
    display: none;
}

/* === Newsflash-Bereich === */
.mod-row {
    display: flex;
}

.newsflash-wrapper {
    display: flex;
    width: 45%;
    padding: 2%;
    flex-wrap: wrap;
    gap: 20px;
}

.newsflash-item {
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.newsflash-nextgames {
    display: flex;
    width: 45%;
    padding: 2%;
    flex-wrap: wrap;
    gap: 20px;
}

.newsflash-nextgames-item {
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Teambild-Container */
#teampic {
    text-align: center; /* Inhalt mittig ausrichten */
    margin: 20px auto;  /* Abstand nach oben/unten */
    max-width: 100%;    /* Maximal die Containerbreite */
}

/* Bild innerhalb des Containers */
#teampic img {
    width: 95%;            /* 95% der Parent-Breite */
    height: auto;          /* Seitenverhältnis erhalten */
    display: block;        /* Bild als Blockelement */
    margin: 0 auto;        /* horizontal mittig */
    border-radius: 8px;    /* optional: abgerundete Ecken */
}

/* Namensliste unter dem Bild */
#teampic_names {
    text-align: center;   /* Text mittig */
    font-size: 1rem;       /* gut lesbare Größe */
    margin-top: 10px;      /* Abstand zum Bild */
    line-height: 1.5;      /* Zeilenhöhe */
}

table.vorstand {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
    table-layout: fixed; /* gleich breite Spalten */
}


table.vorstand td {
    width: 33.333%; /* Jede Zelle exakt ein Drittel */
    text-align: center;
    vertical-align: top;
    padding: 10px;
}

/* Bilder */
.vorstand_pic {
    width: 95%;
    aspect-ratio: 4 / 5; /* oder weglassen, wenn du Höhe fix definierst */
    object-fit: cover;
    object-position: top; /* Fokus nach oben setzen */
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}


/* Name unter dem Bild */
.vorstand_name {
    margin-top: 8px;
    font-size: 1rem;
    font-weight: bold;
}

/* === Mobile-Stile (bis 768px) === */
@media screen and (max-width: 768px) {
    body {
        width: 95%;
    }
	
	.jvisit{
		float: left;
		width:15%;
	}	
	.main-menu {
	  flex-direction: column;
	  background-color: white;
	  width: 100%;
	}

	.main-menu.open {
	  display: flex !important;
	}
    /* Burger-Icon sichtbar machen */
    .menu-icon {
    display: block;
    font-size: 40px;
    margin: 0 auto;    /* zentriert horizontal */
    color: #199e3d;
    padding: 15px 20px;
    background-color: white;
    width: fit-content;  /* Breite nur so groß wie Inhalt */
}



    /* Menü verstecken */
    ul.main-menu {
        display: none !important;
        flex-direction: column;
        width: 100%;
        background-color: #199e3d;
        padding-left: 0;
        margin: 0;
    }

    /* Menü anzeigen wenn Checkbox aktiviert */
    #menu-toggle:checked ~ ul.main-menu {
        display: flex !important;
    }

    ul.main-menu li {
        width: 100%;
    }

    ul.main-menu li a {
        text-align: center;
    }	

	ul.main-menu li .submenu {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.4s ease, opacity 0.4s ease;
		top: 100%;
		left: 0;
		position: static; /* Untermenü unter Hauptpunkt statt absolut */
		width: 100%;
		background-color: #a8d5a8;
		list-style: none;
		padding: 0;
		margin: 0;
		min-width: 200px;
		z-index: 1000;
	}

	ul.main-menu li:hover > .submenu {
		max-height: 500px; /* groß genug, um den Inhalt anzuzeigen */
		opacity: 1;
	}

	ul.main-menu li .submenu li a {
		text-align: center;                  /* Schrift mittig */
		background-color: #a8d5a8;           /* blasses Grün (Beispiel) */
		color: white;                       /* Textfarbe, falls nötig */
		padding: 10px 15px;                 /* Abstand */
		display: block;                    /* damit Fläche klickbar ist */
		font-weight: bold;                 /* falls du fett möchtest */
		transition: background-color 0.3s ease; /* sanfter Übergang */
		width: 100%;
	}
	ul.main-menu li a:hover {
		background-color: #b3ee3a;
		text-align: center; 
	}

	/* Untermenüpunkte Hover: gleiche Farbe (keine Änderung) */
	ul.main-menu li .submenu li a:hover {
		background-color: #b3ee3a; /* gleiche Farbe wie normal */
		color: white;               /* optional, falls du Farbe ändern willst */
		cursor: pointer;            /* Hand-Cursor bei Hover */
	}

    #menu-toggle:checked ~ ul.main-menu li .submenu {
        display: block; /* Submenu sichtbar machen wenn gewünscht */
    }	
	
	.mod-row {
		flex-direction: column;
	}	

    .newsflash-wrapper {
	  width: 100%;
	  box-sizing: border-box; /* Padding & Border werden in die Breite eingerechnet */
	  overflow-wrap: break-word; /* Zeilenumbruch bei langen Wörtern */
      flex-direction: column;
    }

    .newsflash-item {
        width: 100%;
    }
	
	.newsflash-nextgames {
		width: 100%;
		flex-wrap: wrap;
        box-sizing: border-box;		
		gap: 20px;
	}

	.newsflash-nextgames-item {
		width: 100%;
		background: white;
		border: 1px solid #ccc;
		border-radius: 8px;
		padding: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
	}	
	
	.full-width-banner{
		display:none;
	}

	    table.vorstand, 
    table.vorstand tbody,
    table.vorstand tr,
    table.vorstand td {
        display: block;
        width: 100%;
    }

    table.vorstand td {
        padding: 15px 0;
    }

    .vorstand_pic {
        width: 95%;
    }
	.mobile-banner {
	  display: block;
	  margin: 0 auto;
	  width: 95%;
	  mask-image: 
		linear-gradient(
		  to right,
		  transparent 100%,
		  black 40%
		),
		linear-gradient(
		  to bottom,
		  black 70%,
		  transparent 100%
		);
	  -webkit-mask-image: 
		linear-gradient(
		  to right,
		  transparent 100%,
		  black 40%
		),
		linear-gradient(
		  to bottom,
		  black 50%,
		  transparent 100%
		);
	}
}