h1 {
        text-align: center;
        color: darkgreen;
        margin-bottom: 10px;
	font-size:25px;
    }
    h2 {
        text-align: center;
        color: yellow;
        margin-bottom: 10px;
	font-size:19px;
    }
    h3 {
        text-align: center;
        color: yellow;
        margin-bottom: 10px;
	font-size:19px;
    }

    * {
        box-sizing: border-box;
    }

    html, body {
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: Arial, sans-serif;
    }
        body {
        width: 100%;
        height: 100%;
	background-color: black;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
	transition: background-image 8.0s ease-in-out;
        }

    .hintergrundbild {
        position: relative;
        width: 100%;
	height: 100%;
    } 
    .background-slideshow {
        position: fixed;
        inset: 0;
        z-index: -10;
        overflow: hidden;
        background: #111;
    }

    .background-slide {
        position: absolute;
        inset: 0;

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        opacity: 0;

        transition: opacity 2s ease-in-out;
    }

    .background-slide.active {
        opacity: 1;
    }

    /* Dunkle Überlagerung */
    .background-slideshow::after {
        content: "";

        position: absolute;
        inset: 0;

        background: rgba(0, 0, 0, 0.4);
    }
    .background-slide.active {
        opacity: 1;
    }

    /* Dunkle Überlagerung */
    .background-slideshow::after {
        content: "";

        position: absolute;
        inset: 0;

        background: rgba(0, 0, 0, 0.4);
    }

    .button1 {
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 0px solid blue;
        color: white;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow:
            0 0 70px rgba(0,0,0,0.5);
        transition:
            all 0.3s ease;
	font-size:14px;
    }

    .button1:hover {
        transform: scale(1.15);
        background: rgba(2, 10, 0, 0.5);
    }

    .button1.aktiv {
        width: 80px;
        height: 80px;
        border-color: #fff700;
        transform: scale(1.2);
        box-shadow:
            0 0 20px #00ff88;
        background: rgba(0, 0, 0, 0.5);
    }

    #uebersicht_button {
        left: 2%;
        top: 33%;
        width: 120px;
        height: 35px;
        border-radius: 25%;
        background: rgba(0, 0, 0, 0.3);
    }
    #uebersicht_info {
        transform: translate(20%, -25%);
    }

    #vergnuegen_button {
        left: 2%;
        top: 50%;
	width: 120px;
	height: 50px;
        border-radius: 25%;
    }
    #vergnuegen_info {
        transform: translate(10%, -80%);
	width: 70%;
	height: auto;
    }

    #michda_button {
        left: 2%;
        bottom: 3%;
	width: 100px;
	height: 30px;
        border-radius: 25%;
        background: rgba(0, 0, 0, 0.3);
    }
    #michda_info {
        transform: translate(20%, -90%);
	height: auto;
	width: auto;
    }

    #antrieb_button {
        left: 85%;
        top: 30%;
	width: 70px;
	height: 70px;
        border-radius: 25%;
        background: rgba(0, 0, 0, 0.3);
    }
    #antrieb_info {
        transform: translate(-107%, -10%);
	width: 70%;
	height: auto;
    }

    #gewinn_button {
        left: 85%;
        bottom: 3%;
	width: 110px;
	height: 50px;
        border-radius: 25%;
    }
    #gewinn_info {
        transform: translate(-120%, -385%);
	width: 60%;
    }

    /* Sprechblase */
    .info {
        display: none;
        position: absolute;
	height: auto;
        width: auto;
        background: rgba(1,1,1,0.9);
        color: #d92f24;
        border-radius: 12px;
        box-shadow:
            0 5px 55px rgba(0,0,0,0.7);
        transform: translate(-10%, -100%);
        z-index: 1000;
	border: 3px solid rgba(0,0,0,0.1);

    }

    .info.anzeigen {
        display: block;
    }

    .info h3 {
        margin-top: 0;
        color: #C0C55E;
    }
    #mailto {
	    height: 22px;
    }

    @Media (max-width: 800px) {
    h1 {
        text-align: center;
        color: darkgreen;
        margin-bottom: 10px;
	font-size:16px;
    }
    h2 {
        text-align: center;
        color: yellow;
        margin-bottom: 10px;
	font-size:14px;
    }
    h3 {
        text-align: center;
        color: yellow;
        margin-bottom: 10px;
	font-size:14px;
    }
    .button1 {
	font-size: 12px;
	    }
    .info
	    {font-size:13px;
	    }
    #mailto {
	    height: 17px;
    }
    #antrieb_button {
        left: 75%;
        top: 20%;
	width: 60px;
	height: 60px;
        border-radius: 25%;
        background: rgba(0, 0, 0, 0.3);
    }
    #antrieb_info {
        transform: translate(-90%, 60%);
	width: 350px;
	height: auto;
    }
    #vergnuegen_button {
        left: 4%;
        top: 80%;
	width: 95px;
	height: 35px;
    }
    #vergnuegen_info {
        transform: translate(-12%, -155%);
	width: 350px;
	height: auto;
    }
    #uebersicht_button {
        left: 4%;
        top: 20%;
	width: 90px;
	height: 35px;
	 }
    #uebersicht_info {
        transform: translate( -8%, 50%);
    }
    #gewinn_button {
        left: 75%;
        top: 85%;
	width: 85px;
	height: 35px;
    }
    #gewinn_info {
        transform: translate( -90%, -345%);
	width: 350px;
	height: auto;
    }
    #michda_button {
	left: 4%;
	top: 92%;
	width: 80px;
	height: 30px;
    }
    #michda_info {
	width: auto;
	height: auto;
/*	display: block; */
}
    }

    @Media (max-height: 400px) {
    h1 {
        text-align: center;
        color: darkgreen;
        margin-bottom: 10px;
	font-size:16px;
    }
    h2 {
        text-align: center;
        color: yellow;
        margin-bottom: 10px;
	font-size:14px;
    }
    h3 {
        text-align: center;
        color: yellow;
        margin-bottom: 10px;
	font-size:14px;
    }
    .button1 {
	font-size: 12px;
	    }
    .info
	    {font-size:13px;
	    }
    #mailto {
	    height: 17px;
    }

    #antrieb_button {
        left: 90%;
        top: 44%;
	width: 60px;
	height: 60px;
        border-radius: 25%;
        background: rgba(0, 0, 0, 0.3);
    }
    #antrieb_info {
        transform: translate(-108%, -29%);
        width: 555px;
	height: auto;
    }

    #michda_button {
	left: 2%;
	top: 80%;
	height: 30px;
	width: 70px;
    }
    #michda_info {
	width: 100%;
	height: 100%;
	overflow: scroll;
	position: flex;
}
    #uebersicht_button {
        left: 3%;
        top: 38%;
	width: 85px;
	height: 30px;
	 }
    #uebersicht_info {
        transform: translate( 14%, -12%);
	width: 550px;
    }
    #vergnuegen_button {
        left: 2%;
        top: 58%;
	width: 95px;
	height: 40px;
    }
    #vergnuegen_info {
        transform: translate(14%, -40%);
	width: 550px;
	height: auto;
    }
    #gewinn_button {
        left: 90%;
        top: 80%;
	width: 65px;
	height: 40px;
    }
    #gewinn_info {
        transform: translate(-110%, -162%);
        width: 550px;
	height: auto;
    }
}