.kyno-mitgliedschaften,
.kyno-mitgliedschaften *{
box-sizing:border-box;
}

.kyno-mitgliedschaften{
display:flex;
flex-direction:column;
gap:16px;
position:relative;
width:100%;
max-width:100%;
overflow:visible;
}

.kyno-mitglied-card{
display:flex;
align-items:flex-start;
gap:14px;
width:100%;
max-width:100%;
background:#fff;
border-radius:16px;
padding:16px 18px;
box-shadow:0 5px 18px rgba(0,0,0,.07);
position:relative;
z-index:1;
transition:.2s ease;
overflow:visible;
}

.kyno-mitglied-card:hover{
transform:translateY(-1px);
box-shadow:0 8px 25px rgba(0,0,0,.1);
z-index:5000;
}

.kyno-mitglied-logo{
width:48px;
height:48px;
min-width:48px;
display:flex;
align-items:center;
justify-content:center;
}

.kyno-mitglied-logo img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}

.kyno-mitglied-content{
flex:1;
min-width:0;
}

.kyno-mitglied-name{
font-size:1rem;
font-weight:700;
line-height:1.25;
margin-bottom:4px;
}

.kyno-mitglied-name a{
color:#111827;
text-decoration:none;
overflow-wrap:anywhere;
}

.kyno-mitglied-name a:hover{
color:#1E3A8A;
}

.kyno-mitglied-date{
font-size:.85rem;
line-height:1.35;
color:#6B7280;
}

.kyno-status-wrapper{
position:relative;
flex-shrink:0;
z-index:20;
}

.kyno-ausbildung-badge{
position:relative;
z-index:1;
padding:5px 11px;
border-radius:999px;
font-size:.75rem;
font-weight:600;
white-space:nowrap;
cursor:pointer;
}

.kyno-status-popover{
position:absolute;
top:calc(100% + 6px);
right:0;
width:220px;
background:#fff!important;
border-radius:10px;
padding:10px 12px;
box-shadow:0 15px 40px rgba(0,0,0,.18);
z-index:10000;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(4px);
transition:.15s ease;
}

.kyno-status-wrapper:hover .kyno-status-popover,
.kyno-status-wrapper:focus-within .kyno-status-popover{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}

.kyno-process{
padding:2px 0;
font-size:.85rem;
font-weight:600;
background:none!important;
color:#9CA3AF;
}

.kyno-process.status-eingereicht,
.kyno-process.status-bestaetigt{
color:#1E3A8A;
}

.kyno-process.status-validiert{
color:#2E7D32;
}

.kyno-process.status-abgelehnt{
color:#F97316;
}

.kyno-status-text{
margin-top:7px;
padding-top:7px;
border-top:1px solid #E5E7EB;
font-size:.72rem;
line-height:1.25;
color:#6B7280;
}

.kyno-more-mitgliedschaften{
display:flex;
flex-direction:column;
gap:16px;
margin-top:16px;
width:100%;
max-width:100%;
}

.status-nicht_eingereicht{
background:#F3F4F6;
color:#6B7280;
}

.status-eingereicht,
.status-bestaetigt{
background:#DBEAFE;
color:#1E3A8A;
}

.status-validiert{
background:#DCFCE7;
color:#2E7D32;
}

.status-abgelehnt{
background:#FFF7ED;
color:#F97316;
}

@media(max-width:768px){

.kyno-mitgliedschaften{
width:100%;
max-width:100%;
overflow:visible;
}

.kyno-mitglied-card{
display:grid;
grid-template-columns:36px minmax(0,1fr);
grid-template-areas:
"logo content"
"logo content";
gap:10px;
padding:14px;
padding-bottom:52px;
border-radius:16px;
overflow:visible;
}

.kyno-mitglied-logo{
grid-area:logo;
width:36px;
height:36px;
min-width:36px;
}

.kyno-mitglied-content{
grid-area:content;
min-width:0;
}

.kyno-mitglied-name{
font-size:.98rem;
line-height:1.22;
margin-bottom:4px;
}

.kyno-mitglied-date{
font-size:.84rem;
line-height:1.35;
}

.kyno-mitglied-card>.kyno-status-wrapper{
position:absolute;
right:14px;
bottom:14px;
width:auto;
max-width:calc(100% - 28px);
z-index:50;
}

.kyno-mitglied-card>.kyno-status-wrapper .kyno-ausbildung-badge{
width:max-content;
max-width:100%;
}

.kyno-mitgliedschaften .kyno-status-popover{
position:absolute!important;
bottom:calc(100% + 8px)!important;
top:auto!important;
right:0!important;
left:auto!important;
width:190px!important;
max-width:calc(100vw - 32px)!important;
min-width:0!important;
padding:10px 12px!important;
background:#fff!important;
border-radius:10px!important;
box-shadow:0 15px 40px rgba(0,0,0,.18)!important;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-4px);
z-index:10000!important;
}

.kyno-mitgliedschaften .kyno-status-wrapper:hover .kyno-status-popover,
.kyno-mitgliedschaften .kyno-status-wrapper:focus-within .kyno-status-popover{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
transform:translateY(0)!important;
}

}

@media(max-width:480px){

.kyno-mitglied-card{
padding:13px;
padding-bottom:52px;
}

.kyno-mitglied-card>.kyno-status-wrapper{
right:13px;
bottom:13px;
}

.kyno-mitgliedschaften .kyno-status-popover{
width:180px!important;
max-width:calc(100vw - 28px)!important;
}

}