/*
Haftpflichtkasse
MILESTONE V2 2023/03/
Goldfischclub, pw@goldfischclub.de
*/

.v2.play .col1-1 {
	position: relative;
}

/* controller */
.milestone--controller {
	position: absolute;
	top: 130px;
	left: -45px;
}
.details .milestone--controller ul {
	position: fixed;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.details .milestone--controller li {
	background-image: none;
}
.details .milestone--controller li + li {
	margin-top: 5px;
}
.details .milestone--controller li a.aktiv {
	display: block;
	width: 23px;
	height: 23px;
	margin-left: -4px;
}
.milestone--controller li a {
	display: block;
	width: 15px;
	height: 15px;
	border: 2px solid #00A0DC;
	background-color: #fff;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-khtml-border-radius: 50%;
}




/* animation  -------------------------------- */

/* start */
.mod-milestone .fakt,
.mod-milestone .fakt .jahr,
.mod-milestone .bild img {
	opacity: 0;
}
.mod-milestone .fakt  .txt p {
	margin-top: 300px;
	opacity: 0;
}
.milestone-type-left .fakt {
	margin-left: -200px;
}
.milestone-type-right .fakt {
	margin-left: 200px;
}
div.details .col1-1 .mod-milestone.milestone-type-left .c-a .bild img {
	left: -200px;
}
div.details .col1-1 .mod-milestone.milestone-type-left .c-b .bild img {
	left: 200px;
}


/* ende */
.come-in.mod-milestone .fakt {
	opacity: 1;
	margin-left: 0;
}
.come-in.mod-milestone .bild img,
.come-in.mod-milestone .fakt .jahr {
	opacity: 1;
}
.come-in.mod-milestone .fakt .txt p {
	margin-top: 20px;
	opacity: 1;
}
div.details .col1-1 .come-in.mod-milestone .c-a .bild img,
div.details .col1-1 .come-in.mod-milestone .c-b .bild img {
	left: 0;
}



.already-in.mod-milestone .fakt {
	opacity: 1;
	margin-left: 0;
}
.already-in.mod-milestone .bild img,
.already-in.mod-milestone .fakt .jahr {
	opacity: 1;
}
.already-in.mod-milestone .fakt .txt p {
	margin-top: 20px;
	opacity: 1;
}

div.details .col1-1 .already-in.mod-milestone .c-a .bild img,
div.details .col1-1 .already-in.mod-milestone .c-b .bild img {
	left: 0;
}

div.details .col1-1 .already-in.mod-milestone .c-a .bild img,
div.details .col1-1 .already-in.mod-milestone .c-b .bild img,
.already-in.mod-milestone .bild img,
.already-in.mod-milestone .fakt,
.already-in.mod-milestone .fakt .txt p {
	animation: none;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
}


/* ANIMATION ELEM */

div.details .col1-1 .mod-milestone .c-a .mod-milestone .bild img,
div.details .col1-1 .mod-milestone .c-b .mod-milestone .bild img,
.mod-milestone .bild img,
.mod-milestone .fakt,
.mod-milestone .fakt .jahr,
.mod-milestone .fakt .txt p {
	-webkit-transition: all 1s 1s ease-out;
    -moz-transition: all 1s 1s ease-out;
    -o-transition: all 1s 1s ease-out;
    -ms-transition: all 1s 1s ease-out;
    transition: all 1s 1s ease-out;
}







.mod-milestone {
	display: block;
	margin-top: 20px;
	overflow: hidden;

}
@media only screen and (max-width: 750px) {
	.mod-milestone {
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		align-content: flex-start;
		flex-flow: row wrap;
	}
}

.mod-milestone + .mod-milestone {
	margin-top: 150px;
}
@media only screen and (max-width: 750px) {
	.mod-milestone + .mod-milestone {
		margin-top: 60px;
	}
}

/* BASICS */
div.details .col1-1 .mod-milestone .col {
	float: none;
	display: inline-block;
	vertical-align: top;
}
div.details .col1-1 .mod-milestone .c-a {
	width: calc(40% - 20px);
	margin: 0;
	text-align: right;
	margin-right: 20px;;
}
div.details .col1-1 .mod-milestone .c-b {
	width: 60%;
	margin: 0;
}

@media only screen and (max-width: 980px) {
	.mod-milestone + .mod-milestone {
		margin-top: 60px;
	}

	div.details .col1-1 .mod-milestone.milestone-type-left .c-a {
		width: calc(60% - 20px);
		margin: 0;
		text-align: right;
		margin-right: 20px;;
	}
	div.details .col1-1 .mod-milestone.milestone-type-left .c-b {
		width: 40%;
		margin: 0;
	}
}
@media only screen and (max-width: 750px) {
	div.details .col1-1 .mod-milestone .c-a,
	div.details .col1-1 .mod-milestone .c-b,
	div.details .col1-1 .mod-milestone.milestone-type-left .c-a,
	div.details .col1-1 .mod-milestone.milestone-type-left .c-b,
	div.details .col1-1 .mod-milestone.milestone-type-right .c-a,
	div.details .col1-1 .mod-milestone.milestone-type-right .c-b {
		display: block;
		width: 100%;
		margin-right: 0;
	}
	div.details .col1-1 .mod-milestone.milestone-type-right .c-a {
		order: 2;
	}
	div.details .col1-1 .mod-milestone.milestone-type-right .c-b {
		order: 1;
	}
}




.mod-milestone .bild {
	display: inline-block;
	text-align: left;
	width: 100%;
	position: relative;
}
.mod-milestone .bild img {
	position: relative;
}
.mod-milestone .c-a .bild {
	text-align: right;
}
.mod-milestone .c-a .bild img {
	width: 100%;
}
.mod-milestone .c-b .bild img {
	max-width: 100%;
}






/*
'1'=>'Grün',
'2'=>'Lila 1',
'3'=>'Lila 2',
'4'=>'Gelb',
'5'=>'HK Blau',
'6'=>'Blau 1',
'7'=>'Blau 2',
'8'=>'Rot 1',
'9'=>'Rot 2'


FARBEN
*/

.fakt .jahr,
.fakt .titel,
div.details .fakt p {
	color: #fff;
}
.milestone-color-1 .fakt {
	background-color: #6DB67D;
}
.milestone-color-2 .fakt {
	background-color: #502879;
}
.milestone-color-3 .fakt {
	background-color: #6E28AA;
}
.milestone-color-4 .fakt {
	background-color: #DCC300;
}
.milestone-color-5 .fakt {
	background-color: #00A0DC;
}
.milestone-color-6 .fakt {
	background-color: #7788BF;
}
.milestone-color-7 .fakt {
	background-color: #7882FA;
}
.milestone-color-8 .fakt {
	background-color: #DC2873;
}
.milestone-color-9 .fakt {
	background-color: #DA2E6C;
}


.milestone-color-4 .fakt .jahr,
.milestone-color-4 .fakt .titel,
div.details .milestone-color-4 .fakt p {
	color: #000;
}




/* FONT SIZES */
.headline {
	font-weight: bold;
}
div.details .mod-milestone p {
	font-size: 18px;
	line-height: 22px;
}
div.details .mod-milestone .headline {
	font-size: 18px;
	line-height: 22px;
}
div.details .mod-milestone .fakt .jahr {
	font-size: 52px;
}
div.details .mod-milestone .fakt .titel {
	font-size: 28px;
	margin-bottom: 20px;
}

@media only screen and (max-width: 980px) {
	div.details .mod-milestone .headline {
		margin-top: 30px;
	}
	div.details .mod-milestone .fakt .jahr {
		font-size: 32px;
	}
}
@media only screen and (max-width: 750px) {
	div.details .mod-milestone .headline {
		margin-top: 30px;
		margin-bottom: 20px;
		text-align: left;
	}
	div.details .mod-milestone .fakt .jahr {
		font-size: 32px;
	}
}



/* MILESTONES */

/* RECHTS */
/* 1898_1901 */
.milestone--1898_1901 .fakt,
.milestone--1945_1949 .fakt,
.milestone--1970_1989 .fakt,
.milestone--2000_2009 .fakt {
	width: calc(100% - 75px);
	padding: 30px;
	margin-bottom: 10px;
}
@media only screen and (max-width: 750px) {
	.milestone--1898_1901 .fakt,
	.milestone--1945_1949 .fakt,
	.milestone--1970_1989 .fakt,
	.milestone--2000_2009 .fakt {
		width: calc(100% - 40px);
		padding: 20px;
		margin-bottom: 10px;
	}
}
div.details .col1-1 .milestone--1898_1901  .c-a .bild,
div.details .col1-1 .milestone--1945_1949  .c-a .bild,
div.details .col1-1 .milestone--1970_1989  .c-a .bild,
div.details .col1-1 .milestone--2000_2009  .c-a .bild {
	margin-top: 90px;
}
div.details .col1-1 .milestone--1898_1901 .c-b .txt,
div.details .col1-1 .milestone--1945_1949 .c-b .txt,
div.details .col1-1 .milestone--1970_1989 .c-b .txt,
div.details .col1-1 .milestone--2000_2009 .c-b .txt {
	margin-top: 20px;
}
/* 1945_1949 */
div.details .col1-1 .milestone--1945_1949  .c-a .headline {
	margin-top: 40px;
}
div.details .col1-1 .milestone--1945_1949  .c-a .txt {
	text-align: left;
	margin-top: 18px;
}

/* 1970_1989 */
div.details .milestone--1970_1989 .headline {
	margin-top: 20px;
}
div.details .milestone--1970_1989 .txt {
	text-align: left;
	margin-top: 20px;
}

/* 2000_2009 */
div.details .milestone--2000_2009 .headline {
	margin-top: 20px;
}
div.details .milestone--2000_2009 .txt {
	text-align: left;
	margin-top: 20px;
}


/* LINKS */
/* 1901_1939 */
.milestone--1901_1939 .fakt,
.milestone--1950_1969 .fakt,
.milestone--1990_1999 .fakt,
.milestone--2010_2023 .fakt  {
	width: calc(100% - 60px);
	padding: 30px;
	margin-bottom: 10px;
	text-align: left;
}
@media only screen and (max-width: 750px) {
	.milestone--1901_1939 .fakt,
	.milestone--1950_1969 .fakt,
	.milestone--1990_1999 .fakt,
	.milestone--2010_2023 .fakt  {
		width: calc(100% - 40px);
		padding: 20px;
		margin-bottom: 10px;
		text-align: left;
	}
}


div.details .col1-1 .milestone--1901_1939 .c-b .bild img,
div.details .col1-1 .milestone--1950_1969 .c-b .bild img,
div.details .col1-1 .milestone--1990_1999 .c-b .bild img,
div.details .col1-1 .milestone--2010_2023 .c-b .bild img {
	margin-top: 60px;
	margin-bottom: 20px;
}

/* 1950_1969 */
div.details .milestone--1950_1969 .headline {
	margin-bottom: 30px;
}

/* 1990_1999 */
.milestone--1990_1999 .headline {
	margin-bottom: 30px;
}

/* 2010_2023 */