/*root MUSS ins global.css, sonst passiert gar nüscht*/


/* --------------------------- sortierung der flexbox-kiddies von oben nach unten ------------------------- */

.bottom_flex_col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
	
    box-sizing: border-box;
    width: 100%;
    margin: auto auto;
    padding: 2px;
	
	color: var(--zwoelf);
	font-size:  var(--fs_drei) !important;
	text-transform: uppercase;
	text-align: justify;
}

/* --------------------------- sortierung der flexbox-kiddies von links nach rechts ------------------------- */

.bottom_flex_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
	flex-wrap:wrap; /*braucht es?*/
	align-items:stretch;  /*braucht es?*/
	
    box-sizing: border-box;
    width: 100%;
    margin: auto auto;
    padding: 2px;
	
	color: var(--zwoelf);
	font-size:  var(--fs_drei);
	text-transform: uppercase;
	text-align: justify;
}

/* --------------------------- allgemeingültige boxeninhalte: header & lane (als 'inhaltsbox') ------------------------- */

.bottom_head {
   background-color: var(--elf);
    opacity: 90%;
    font-family: var(--open);
    font-size: var(--fs_zwei);
    letter-spacing: 1.5px;
    padding: 10px;
    border: solid 2px var(--drei);
}

.bottom_lane {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.bottom_bott {
   	background-color: var(--elf);
    opacity: 90%;
	height: 12px;
    font-family: var(--open);
    font-size: var(--fs_zwei);
    letter-spacing: 1.5px;
    padding: 6px;
    border: solid 2px var(--drei);
	text-align: center;
}

/* --------------------------- wer war online & wer ist online ------------------------- */

.bottom_lane > .lane_l {
	width: 66.6%; 
	text-align: left;
	background-color: var(--zwei);
	margin: 2px;
	padding: 8px;
}

.bottom_lane > .lane_r {
	width: 33.3%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    background-color: var(--zwei);
    margin: 2px;
    padding: 8px;
	}

/*sozusagen h1 für wer ist online*/
.bottom_lane_head {
	font-size:  var(--fs_drei);
	letter-spacing: 1.5px;
	font-weight: bold;
}

.bottom_lane_head link {
	color: var(--picked);
}

/*die links untendrunter*/
.bottom_lane_sub {
	margin-top: 5px;
}

/* --------------------------- abwesende mitglieder & statistik & sisterbuttons ------------------------- */

.bucket_dreier {
	flex: 1;
	width: 33%; 
	display: flex;
	flex-direction: column;
}

.bucket_dreier > .bottom_head {
    text-align: center;
}

.bucket_dreier > .bottom_lane {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* --------------------------- abwesende mitglieder (sortiert nach member) ------------------------- */

.abwesend {
	flex: 1;
	background-color: var(--zwei);
	margin: 2px;
	padding: 8px;
}

/* klappt nicht 
.abwesend > element.style {
    color: var(--picked) !important;
}*/


/* --------------------------- statistik ------------------------- */

.bottom_alley {
	display: flex;
	flex-direction: row; 
	justify-content: center;
	flex: 1;
	align-items: center;
	
	background-color: var(--zwei);
	margin: 2px;
	padding: 4px;
}

.icon_l {
	width: 15%; 
	font-size: var(--fs_eins);
	color: var(--picked);
	text-align: center;
}

.info_r {
	width: 85%; 
	font-size: var(--fs_eins);
	text-align: justify;
}

.info_r link {
	color: var(--picked);
}

/* --------------------------- sisterbuttons ------------------------- */

.sisterbuttons {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	text-align: center;
	flex:1;
	background-color: var(--zwei);
	margin: 2px;
	padding: 20px;
}

.sisterbuttons img {
	margin: 2px;
}

/* --------------------------- zitate & gossip ------------------------- */

.bucket_zweier {
	flex: 1;
	width: 50%; 
	display: flex;
	flex-direction: column;
}

.bucket_zweier > .bottom_head {
    text-align: center;
}

.bucket_zweier > .bottom_lane {
	flex: 1;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	text-align: center;
	font-size: var(--fs_eins);
	padding: 15px 60px 15px 60px;
}