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


.alohomora_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') ------------------------- */

.alohomora_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);
}

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

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

/* --------------------------- bucketspezifika ------------------------- */

.top_bucket_dreier {
	flex: 1;
	width: 33%; 
	display: flex;
	flex-direction: column;
	height: 200px; /* --------------------------- scroolbar... muss in die global.css direkt hinter body-tag! --------------- */
	overflow: hidden;
}

.top_bucket_dreier > .alohomora_head {
    text-align: center;
}

.top_bucket_dreier > .alohomora_lane {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: auto;
	margin-right: 2px; /* --------------------------- scroolbar... damit sie mit head abschließt --------------- */
}

/* --------------------------- aml_hellobit ------------------------- */

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

/* --------------------------- plotbit ------------------------- */

.alohomora_alley {
	display: flex;
	flex-direction: row; 
	justify-content: center;
	flex: 1;
    align-items: center;
	
	background-color: var(--zwei);
	margin: 2px;
	padding-right: 5px;
	padding-top: 8px;
	padding-bottom:8px;
}

.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;
	padding-right: 6%;
}

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

/* --------------------------- inplaykalenderbit ------------------------- */

.aml_kalender {
padding-right: 5px;
}