#ki-indikatoren > section > div.pg_flipRow.threeFourRow > div.pg_flipContainer.hover > div > div.back {border: 2px solid #930e31 !important}
#ki-indikatoren #flipRowFrame > div:nth-child(7) > div.pg_flipContainer.doNotFlip > div > div,
#ki-indikatoren #flipRowFrame > div:nth-child(7) > div.pg_flipContainer.doNotFlip > div > div > div {padding: 0}

#toggleAllButton {float: left; cursor: pointer; padding: 12px 24px; background-color: #930e31; color: #fff; text-align: center; margin-top: 2%; min-width: 216px;  -webkit-user-select: none;-ms-user-select: none;user-select: none}

.smallerText .doNotFlip h2 {font-size: 26px !important}
.smallerText .doNotFlip p {margin-top: 5px}

.flipper .front figure img
{
-webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    -moz-transition: all .45s cubic-bezier(.23,1,.32,1);
    -ms-transition: all .45s cubic-bezier(.23,1,.32,1);
    -o-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
}

.pg_flipRow {display: flex;margin: 4px 0}
.pg_flipRow.threeFourRow .pg_flipContainer:first-child{width: 75%; cursor: default}
.pg_flipRow.fourTwoRow .pg_flipContainer:last-child{width: 50%;cursor: default}

/*HEIGHT*/
.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper, .pg_flipContainer, .front, .back {height: 220px} 
.flipper .front .frontText {top: 120px;height: 80px}

/*AUSNAHMEN --> 2. Reihe*/
.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper {padding: 50px;display: flex;align-items: center;}
.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper h1,.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper h2, .pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper p, .pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper h3 {color: #003c69}
.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper h1, .pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper h2 {font-size: 30px; margin-bottom: 0;}
.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper h3 {margin: 10px 0 0 65px;font-size: 20px;}
.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper p {margin-bottom: 0;font-size: 0.9em;}


/*GENERALS*/
.pg_flipContainer {perspective: 1000px;width: 25%;border-right: 4px solid #fff;border-bottom: 4px solid #fff;cursor: pointer}


/* flip the pane when clicked */
.pg_flipContainer.hover .flipper {transform: rotateY(180deg);}


/* flip speed goes here */
.flipper {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.flipper .front, .flipper .back {backface-visibility: hidden;width: 100%;position: absolute;top: 0;left: 0;}
.flipper .back .button {font-weight: bold;margin-top: 10px;cursor: pointer}
.flipper .front > button {position: absolute; top: 0; left: 0; width: 100%; height: 100%}

.flipper .front {color: #fff;z-index: 2;transform: rotateY(0deg);padding: 35px 25px}
.flipper .front figure {display: flex; justify-content: center; margin-top: -30%}
.flipper .front figure img {max-width: 30%}
.flipper .front:hover figure img {max-width: 35%}
.flipper .front .frontText {position: absolute; color: #fff; width: 100%;left: 0;text-align: center; padding: 0 15px; margin: 0} 
.flipper .front .frontText h2 {color: #fff; font-size: 18px;margin: 0}
.flipper .front .frontText p {margin: 0;font-size: 0.85em;margin-top: 5px;position: absolute;bottom: 15px;width: 100%;left: 0;}

/* back, initially hidden pane */
.flipper .back {transform: rotateY(180deg);padding: 25px; background-color: #f4f4f4;border: 1px solid #ddd;}
.flipper .back p {margin: 0; color: #333}
.flipper .back .buttonRow {position: absolute;bottom: 5px;width: 100%;left: 0;display: flex;justify-content: end}
.flipper .back .button {font-weight: bold; font-size: 1.8em; cursor: pointer; margin: 0 4%}
.flipper .back .button.close:before {content: "\f057";font-family: "FontAwesome";}
.flipper .back .button.info:before {content: "\f138";font-family: "FontAwesome";}
.flipper .front.doNotFlip {padding: 25px}
.flipper .front.doNotFlip .frontText {position: initial; height: auto}
.flipper .front.doNotFlip .frontText p {position: initial}


.flipper .back .content {position: absolute;top: 10px;left: 25px;right: 25px;bottom: 65px; line-height: 1.7em;font-size: 0.8em}
.flipper .back .content div {width: 100%}
.flipper .back .numb {font-size: 45px !important;font-weight: bold;line-height: normal;}
.flipper .back .numb.small {font-size: 30px !important}
.flipper .back .numb.smaller {font-size: 22px !important}
.flipper .back .content span.textcenter, .flipper .back .content span.textright {display: block}
.flipper .back .redText {color: #930e31; font-size: 1.1em}
.flipper .back .blueText {color: #003c69; font-size: 1.1em}
.flipper .back .purpleText {color: #8489c4; font-size: 1.1em}
.flipper .back .smalltext {font-size: 1em}



/*LIGHTBOXES*/
body.fixed {overflow: hidden}
#pg_flipLightBoxBack {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 999999}
#pg_flipLightBoxFrame {position: fixed; top: 15%; width: 70%; left: 15%; bottom: 15%; background-color: rgba(255,255,255,1); z-index: 999999;overflow: hidden}
#pg_flipLightBoxBack.active, #pg_flipLightBoxFrame.active {display: block}
#pg_flipLightBoxIFrame {width: 100%; height: 100%; outline: 0; border: none}
#pg_flipLightBoxBack .button.close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #fff;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

#pg_flipLightBoxBack .button.close:hover,
#pg_flipLightBoxBack .button.close:focus {
  color: var(--font-bold);
  outline: none;
}
#pg_flipLightBoxBack .button.close:focus-visible {outline: -webkit-focus-ring-color auto 1px !important;}
#pg_flipLightBoxBack .button.close:focus {
  outline: 2px solid var(--red); /* oder eine andere auffällige Farbe */
  outline-offset: 2px;
}



/*MEDIABREAKS*/
@media (max-width: 1200px)
{
	.flipper .back {font-size: 0.9em}
	.flipper .back .numb.small {font-size: 28px !important}
	.flipper .back .numb {font-size: 40px !important}
	.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper {padding: 25px}
	.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper h2 {font-size: 25px}
}	
@media (max-width: 1050px)
{
	.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper, .pg_flipContainer, .front, .back {height: 250px}
	#ki-indikatoren > section > div:nth-child(7) > div.pg_flipContainer.doNotFlip > div > div > div {height: 240px !important; background-size: contain !important}
	.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper, .pg_flipContainer,  .pg_flipContainer .front,  .pg_flipContainer .back {height: 250px}
	#ki-indikatoren .flipper .front .frontText {height: 90px; top: 150px}
	.flipper .front figure img {width: 15%}
	#ki-indikatoren .flipper .front .frontText h2 {hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; }
	#ki-indikatoren .pg_flipRow {flex-wrap: wrap; margin: 0}
	#ki-indikatoren .pg_flipContainer {width: 50%;margin-bottom: 4px;border-bottom: 0}
	#ki-indikatoren	.pg_flipRow.threeFourRow .pg_flipContainer:first-child {width: 100%}
	#ki-indikatoren	.pg_flipRow.threeFourRow .pg_flipContainer:first-child {height: 400px}
	#ki-indikatoren	.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper {padding: 25px; height: 400px}
	#pg_flipLightBoxFrame {width: 90%; top: 14%; left: 5%; bottom: 10%}

}

@media (max-width: 768px)
{
#ki-indikatoren .pg_flipContainer {width: 100%}
.flipper .front figure {margin-top: -20%}
/*
	#flipRowFrame {position: relative; padding-bottom: 1327px; padding-top: 445px}
	#flipRowFrame > div.pg_flipRow.threeFourRow > div.pg_flipContainer.doNotFlip {position: absolute; top: 0}
	#toggleAllButtonFrame {position: absolute; bottom: 0; display: none}
	#flipRowFrame > div:nth-child(7) > div.pg_flipContainer.doNotFlip {display: none}
	#ki-indikatoren > section > div:nth-child(7) > div.pg_flipContainer.doNotFlip {position: absolute; bottom: 60px}
	#flipRowFrame > div:nth-child(7) > div:nth-child(2) {position: absolute; bottom: 310px}
	#flipRowFrame > div:nth-child(7) > div:nth-child(1) {position: absolute; bottom: 565px}
	#flipRowFrame > div:nth-child(5) > div:nth-child(2) {position: absolute; bottom: 819px}
	#flipRowFrame > div:nth-child(5) > div:nth-child(1) {position: absolute; bottom: 1073px}


	#ki-indikatoren .pg_flipContainer {width: 100%;}
	.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper, .pg_flipContainer, .front, .back {height: 250px}
	.pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper, .pg_flipContainer,  .pg_flipContainer .front,  .pg_flipContainer .back {height: 250px}
		
	.flipper .front .frontText {top: 140px; height: 100px !important}
	.flipper .front figure img {max-width: 24%}
	
	#quickNav ul {display: flex; justify-content: center; align-items:center}
	#quickNav ul li {margin-left: 0}	
*/	
}
/*
@media (max-width: 400px)
{
	#plsLogo img {max-width: 120px !important}
	#logoBar .inside {display: flex; align-items: center;justify-content: center;}

	#flipRowFrame {padding-top: 500px}
	#ki-indikatoren .pg_flipRow.threeFourRow .pg_flipContainer:first-child, #ki-indikatoren .pg_flipRow.threeFourRow .pg_flipContainer:first-child .flipper {height: 500px}
}

*/