*{box-sizing:border-box}
/*html,body{margin:0;height:100%;font-family:Arial,Helvetica,sans-serif;background:#f4f4f4}*/
html,
body
{
    margin:0;
    height:100%;
    overflow-y:auto;
	font-family:Arial,Helvetica,sans-serif;background:#f4f4f4}
}

body{display:flex;flex-direction:column}
/*#TextArea{height:80px;background:#23435f;color:#fff;display:flex;justify-content:center;align-items:center;font-size:30px;font-weight:bold}*/
#TextArea
{
    background:#23435f;
    color:white;

    padding:20px 30px;

    display:flex;
    justify-content:center;

    font-size:14px;
    line-height:1.5;
}

#TextArea p
{
    margin:0 0 14px 0;
}

#TextArea a
{
    color:#ffd54f;
    font-weight:bold;
    text-decoration:none;
}

#TextArea a:hover
{
    text-decoration:underline;
}

#WelcomeText
{
    width:100%;
    max-width:900px;

    text-align:left;
}

#OverlayImage
{
    position:absolute;

    display:none;

    width:120px;

    transform:translate(-50%,-100%);

    pointer-events:none;
}



#ButtonArea
{
	height:95px;display:flex;justify-content:center;align-items:center;gap:24px;background:#ececec;border-bottom:1px solid #ccc
	/* height:95px;display:flex;justify-content:center;align-items:center;gap:24px;background:#ececec;border-bottom:1px solid #ccc */
	}
.icon
{
    width:clamp(36px, 8vw, 56px);
    height:clamp(36px, 8vw, 56px);
}
.icon:hover{transform:scale(1.15)}
.icon.selected
{
    background:#d50000;
    border:3px solid #d50000;
    border-radius:10px;

    box-shadow:
        inset 0 0 0 2px white,
        0 0 10px rgba(213,0,0,.5);
}
.buttonLabel
{
    font-size:18px;
    font-weight:bold;
    color:#23435f;

    margin-right:12px;

    white-space:nowrap;
}
#ButtonArea > :first-child
{
    margin-left:20px;
}

#ButtonArea > :last-child
{
    margin-right:20px;
}

#ImageArea{flex:1;display:flex;justify-content:center;align-items:center;background:#fff;overflow:hidden}
#ImageContainer
{
	position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
	overflow: hidden;
	}
#MainImage
{ 
     display: block;

    max-width: 85%;
    max-height: 85%;

/* 40 Pixel höher darstellen */
	height: calc(100% + 80px);

    /* width: auto; */
    /* height: auto; */

    object-fit: contain;
	
	/* 20 Pixel nach oben verschieben */
    transform: translateY(-40px);
}



#Marker
{
	position:absolute;

    width:36px;
    height:36px;

    display:none;

    transform:translate(-50%,-100%);
	}
#Marker::before
{
	content:"";

    position:absolute;

    width:28px;
    height:28px;

    left:4px;
    top:0;

    background:#d50000;

    border:3px solid white;

    border-radius:50%;

    box-shadow:0 0 10px rgba(0,0,0,.45);
}
#Marker::after
{
	content:"";

    position:absolute;

    left:14px;
    top:24px;

    width:0;
    height:0;

    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:14px solid #d50000;
}
.bounce{animation:bounce .65s ease}
@keyframes bounce{
0%{transform:translate(-50%,-170%) scale(.3);opacity:0}
60%{transform:translate(-50%,-105%) scale(1.15);opacity:1}
100%{transform:translate(-50%,-100%) scale(1)}
}