@charset "utf-8";
/* CSS Document */

		body {font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; outline: none; outline: hidden;}

        #enddialog {display: none; }
body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background: #000; 
    /*display: flex;
    justify-content: center;
    align-items: center;*/
	background-image: url("../img/märkisches-museum.jpg");
    background-size: cover;
    background-position: center;
}
.roterstreifen {
  position: fixed;
  left: 0;
  bottom: 20px;
	text-align: center;
  width: 100%;
  background-color: red;
  height: 48px;
  padding-top: 13px;
}
.einblenden {
  opacity: 0; /* Unsichtbar zu Beginn */
  animation: fadeIn 2s ease-in-out 3s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1; /* Sichtbar am Ende */
  }
}


.bg-start {
	background-image: url("../img/märkisches-museum.jpg");
    background-size: cover;
    background-position: center;
}
.dark-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0);
    animation: darken 4s ease-out forwards;

    z-index: -1;
}

@keyframes darken {
    from {
        background: rgba(0, 0, 0, 0);
    }
    to {
        background: rgba(0, 0, 0, 0.45);
    }
}


.intro-text {
    position: absolute;
    left: 50%;
    top: -150px;

    transform: translateX(-50%);
    
    color: white;
    font-size: clamp(2rem, 5vw, 5rem);
    font-weight: bold;
    text-align: center;

    text-shadow:
        2px 2px 8px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 0, 0, 0.6);

    animation: slideDown 4s ease-out forwards;
}

@keyframes slideDown {
    from {
        top: -150px;
        opacity: 0;
    }
    to {
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}





		#gesamt {
			width:45%;
			min-width: 312px;
			max-width: 600px;
			text-align:center; 
			margin-top:30px;
			margin: 0 auto 0 auto;
			position: relative;
			display: none;
		}

        #hilfeklick1 { position: fixed;z-index: 2;left:-65px; top:110px;transform: rotate(-90deg);padding-top: 25px}

        #hilfeklick2 { display: none; position: fixed;left:-106px; top:377px;transform: rotate(-90deg);padding-top: 25px}

        #startschild { background-color:blue;z-index: -1; border-radius:20px;border:#fff 6px solid;box-shadow:3px 3px 13px;width:96%;min-height:130px;cursor: pointer; margin:13px auto 0 auto}

		#hilfestart1, #enddialog {display: none;text-align: center;line-height: 1.4em; color: #fff;font-weight: 600; box-shadow:3px 3px 5px #00000088;border-radius:5px;background-color:#373632;  }

		#hilfestart1aktiv, #submit1, #submit2 {margin-top: 10px;font-weight: 500;}

		#sl2 {width: 100%;text-align: center}

		#allelinien, #sl1 {margin: 25px auto 0 auto;max-width: 320px; }

		#ganzeliste, #ganzeliste2 {position: fixed;z-index: 99; display: none;top:13px; right:2px;width: 24%;text-align: center;}

        #ganzeliste {overflow-y: scroll;height: 587px}

        #ganzeliste2 {top:17px;height: 300px}

		#ganzeliste button, #ganzeliste2 button {margin: 0; width: 100%;box-shadow: 1px 1px 8px}

		#input_STATION {position: fixed;left:0;bottom:20px;width: 100%;background-color: red;height: 48px;padding: 3px}
		.rotesfeld {position: fixed;left:0;bottom:20px;width: 100%;background-color: red;height: 48px;padding: 3px}

        #enddialog button {margin-top: 6px}

		#nummer {border-radius:5px;box-shadow:3px 3px 3px rgba(42,42,42,0.6);width:60px;margin:0px auto 0px auto;color:white;}

        #submit0, #submit1, #submit2 { cursor: pointer;border: none;background-color: transparent;font-size: 1.8em;color: blue}

        #submit1, #submit2 { font-size: 1.2em; line-height: 1em; color: #000; padding-top: 0px;margin-top: 0px}

		/*#output_STATION {display: none;}*/
		a {outline: hidden;outline: none}

		button img {margin-top:3px;}

		button {padding:2px 8px; cursor:pointer; background-color: rgba(255,255,255,0.55); border-radius:20px; min-height:36px;outline: hidden;outline: none}

        #loesung2, #hilfe2 {height: 55px;width: 250px; color:blue;font-size: 1.3em;font-weight: 300;line-height: 1em;}

        #hilfe2 { background-color:#373632; color: aliceblue }

        #loesung2t {margin: 25px auto 35px auto;z-index: -1; width: 100%;min-width: 300px;position: relative;color:#000;font-size: 1.3em;font-weight: 600;}

		#loesung3 {margin: 25px auto 35px auto;z-index: -1; width: 96%;min-width: 300px; height: 100px;position: relative; display: none}

		#loesung3_1, #loesung3_2 {min-height:35px;height: auto; width: 97.5%;background-color: #0000ff;color: #fff;font-size: 1.3em;line-height: 1em; font-weight: 700;padding-top:13px;vertical-align: middle; box-shadow: 3px 3px 8px #000; border: 4px #fff solid; border-radius:10px;margin-top: 5px; }

		#loesung3_1:hover, #loesung3_2:hover { cursor: pointer;}

		@media only screen and (max-width: 670px) {
			#loesung3, #loesung2t {margin: 55px auto 35px auto;}
			#startschild {margin: 13px auto 0 auto;}
			#gesamt {width:66%;margin: 0 auto 0 2%}
		}