:root {
--mittelton: #CECDCD;
--accent1: #818733;
--font:#232020;
--clubback:#DAD9D9;
}

.clubflex {display:flex; 
    flex-wrap:wrap; 
    gap:10px !important; 
    justify-content:space-evenly;}

.club {
    width:225px;
    border: 3px solid var(--mittelton);
    padding:0px 5px;
    background: var(--clubback);
color: var(--font);}

.club img {
display: block;
margin: auto;}

.club h3 {
    font-weight: 500;
	font-size:13px;
    text-transform: uppercase;
	color: var(--accent1);
    line-height: 1;
    padding: 0px 10px;
    border-bottom:1px solid var(--accent1);
	font-weight:bold;
}

.club h3 a:hover {
color: white;
transition:2s;
text-decoration:none;}

.club h4, h4 a {
    font-weight: 500;
	font-size:13px;
	width:205px; 
    text-transform: uppercase;
	color: var(--clubback);
    padding: 10px;
    border-bottom:1px solid var(--accent1);
	font-weight:bold;
	background: var(--accent1);
}

.clubnews {
text-align:justify;
width:190px;
margin:auto auto;}

.club h2, h2 a {
  font-family: 'Georgia';
  font-size: 18px;
	width:215px; 
	margin:auto;
  color: var(--font);
	line-height: 100%;
padding:5px;
border-bottom:1px solid var(--accent1);}

.club img {
    width:225px;
    height:200px;}

.clubdesc {
    padding:10px;
    line-height:1.2;
    text-align:justify;
	height:250px;
	overflow:auto;
}

.clubgesuche {
padding: 0px 10px 10px 10px;}

.clubminiinfo {width:25%; max-height:300px; overflow:auto;}

.clubmember {
    margin-top:10px;
    border-top:1px solid var(--accent1);
    padding:5px;}

.clubbutton {
    letter-spacing: 5px; 
    text-transform: uppercase; 
    color: var(--accent1); 
    font-size:10px; 
    background:none; 
    border:none; 
    font-weight:bold;}

.infopop {
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: hsla(0, 0%, 0%, 0.8); 
    z-index: 1; 
    opacity: 0; 
    pointer-events: none; /* Verhindert Interaktionen, wenn das Popup nicht sichtbar ist */
    visibility: hidden; /* Popup ist unsichtbar, wenn nicht aktiv */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.infopop:target {
    opacity: 1;
    pointer-events: auto; /* Ermöglicht Interaktionen, wenn das Popup sichtbar ist */
    visibility: visible; /* Popup wird sichtbar, wenn es aktiviert ist */
}

.infopop > .pop {
    background: var(--clubback);
    border: solid 1px var(--mittelton);
    width: 1023px;
    position: relative;
    margin: 320px auto 0px auto;
    padding: 25px;
    z-index: 3;
    margin-top: 10%;
}

.closepop {
    top: 10px;
    right: 10px;
    text-decoration: none;
    color: var(--mittelton);
}