/* kat staerken-koffer Styles */
/*
*
*
*
*
*/

:root {
	--width-multiplier: 1;
	--width-constant: 40px;
}

.d-flex {
	display: flex;
}

#staerken-koffer-buttons {
	padding-top: 25px;
}
#staerken-koffer-buttons .d-flex {
	flex-wrap: wrap;
}

#staerken-koffer-buttons .d-flex > div {
	flex-shrink: 1;
	flex-grow: 1;
	flex-basis: 25%;
    width: 25%;
	max-width: 95px;
    padding-left: 15px;
    padding-right: 15px;
}

@media(min-width:768px) {
	#staerken-koffer-buttons .d-flex > div {
		flex-basis: 14.28%;
    	width: 14.28%;
		max-width: unset;
	}
}

#staerken-koffer-buttons .d-flex > div > *{
	max-width: 100%;
	display: block;

	/* damit tierisch gruener daumen nicht aufgrund der länger ausm raster fällt: */
	/*max-height: 7.8em;*/
    overflow: hidden;
	margin-top: .7em;
	margin-bottom: .7em;
}

#staerken-koffer-buttons .d-flex > div > * img{
	margin-bottom: .7em;
}

#staerken-koffer-buttons .d-flex > div > input[type=number] {
	background: #e4e3e4;
	border: 0;
	font-weight: 700;
	text-align: center;
	padding-right: 0px;
	padding-left: 11px;
	width: 100%;
}

.staerken-koffer-label {
	cursor: pointer;
}


#staerken-koffer-bg {
	background-image: url(img/koffer-karte-bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	overflow-y: visible;
}

#staerken-koffer-container {
	background-image: url(img/koffer.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	position: relative;

	width: 100%;
    height: 600px; /* damit kind volle heohe bekommen kann */
	padding: 175px 0px 120px;

	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}

@media(min-width: 600px) {
	#staerken-koffer-container {
		padding: 175px 14% 120px;
	}
}

@media(min-width: 1200px) {
	#staerken-koffer-container {
		padding: 175px 0px 0px;
	}
}

#staerken-koffer {
	position: relative;
	width: 100%;
	height: 100%; /* klappt nur wenn eltern feste höhe */

	margin-left: auto;
	margin-right: auto;
	max-width: 530px;
	max-height: 315px;
}


.togrow {
	position: absolute;
	transform: translate(-50%); /* setzt anker in die mitte */

	min-width: 70px;
	height: auto;

	transition: all .6s ease-in-out;
}


.togrow.s1 {
	top: 10%;
    left: 51%;
    width: calc(34% * var(--width-multiplier));
    width: var(--width-constant);
}

.togrow.s2 {
	top: 1%;
    left: 17%;
    width: calc(26% * var(--width-multiplier));
    width: var(--width-constant);
}

.togrow.s3 {
	top: 4%;
    left: 85%;
    width: calc(25% * var(--width-multiplier));
    width: var(--width-constant);
}

.togrow.s4 {
    top: 53%;
    left: 21%;
	width: calc(24% * var(--width-multiplier));
    width: var(--width-constant);
}

.togrow.s5 {
	top: 52%;
    left: 84%;
	width: calc(19% * var(--width-multiplier));
    width: var(--width-constant);
}

.togrow.s6 {
    /*top: 74%;
    left: 49%;*/
	top: 65%;
    left: 46%;
	width: calc(13% * var(--width-multiplier));
    width: var(--width-constant);
}

.togrow.s7 {
    top: 60%;
    left: 69%;
	width: calc(12% * var(--width-multiplier));
    width: var(--width-constant);
}


#staerken-koffer-speichern {
	display: block;
	margin: 1em auto 1em auto;

	border-radius: 15px;
	color: #750863!important;
    font-weight: 700;
    font-size: 1.6rem;

	border: 4px solid #ccc;

	background-image: linear-gradient(to bottom, #fcc300 0%, #fcc300 75%, #e7792c 100%);
}


.pdf-h1 {
	color:#000;
	text-align:center;
	text-transform:none;
	font-size: 0.75cm;
	font-weight:bold;
	margin-top: -0.1cm;
	letter-spacing: 0;
}


#footer-img {
	position:absolute;
	/*top:17.3cm;*/
	bottom: -2.3cm;
	z-index: 10;
	left:0;
	width:100%;
}

#staerken-koffer-bg.a4 {
	min-width: 297mm;
	min-height: 210mm;
	padding-top: 17mm;
	background-image: url(img/Auswertung_Staerkenkoffer-Bund.png);
	background-size: contain;
}

#staerken-koffer-bg.a4.learn-about-skills-de {
	background-image: url(img/Auswertung_Staerkenkoffer-LAS.png);
}

#staerken-koffer-bg.a4.staerken-parcours-de {
	background-image: url(img/Auswertung_Staerkenkoffer-SPSH.png);
}

#staerken-koffer-bg.a4.komm-auf-tour-berlin {
	background-image: url(img/Auswertung_Staerkenkoffer-BER.png);
}

#staerken-koffer-bg.a4.bo-begleitung-sh-de {
	background-image: url(img/Auswertung_Staerkenkoffer-ERSH.png);
}


#staerken-koffer-bg.a4 .togrow {
	transform: translate(0); /* in der pdf sind die icons nach links verschoben - ich hoffe das hilft */
	/* komischerweise sind die icons jetzt nach rechts verschoben */
	/* also nächster versuch */
	transform: translate(-25%); /* nur die hälfte der hälfte - das haut hin auf WIN11 im FF*/
}