/* Allgemeines Layout */
html, body {
margin: 0;
padding: 0;
height: 100%; /* Die Höhe des Viewports soll immer 100% betragen */
font-family: "open sans";
display: flex;
flex-direction: column;
background-color: transparent; /* hellerblauer Hintergrund auf den Kapitelstartseiten*/
overflow: hidden; /* Verhindert das Scrollen der Seite */
}
.ALLES{
width: 1920px;
}
/* Hintergrundvideo */
#backgroundVideo {
position: fixed; /* Fixiert das Hintergrundvideo */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1; /* Setzt das Video hinter den Inhalt */
}
/* Hauptinhalt */
main {
display: flex;
flex-direction: column;
align-items: left;
justify-content: left;
height: 100%; /* Höhe des Hauptinhalts anpassen */
padding: 20px;
z-index: 1; /* Inhalt wird über dem Video angezeigt */
overflow: hidden; /* Verhindert Scrollen */
}
/* Gelbe Hintergründe für die spezifischen Abschnitte */
.vorspann, .mission, .energieretter {
background-color: #e8a723; /* Gelber Hintergrund */
color: #285238; /* Grüne Schriftfarbe */
padding: 20px;
margin: 20px;
width: 100%; /* Stellt sicher, dass der Abschnitt die gesamte Breite einnimmt */
text-align: center;
font-family: "open sans";
border-radius: 5px; /* Optional: Runde Ecken für den Abschnitt */
}
/* Start-Button und andere Layout-Elemente */
.STARTBUTTON {
position: sticky;
justify-content: center;
background-color: transparent;
font-family: "Bangers";
font-size: 12rem;
line-height: 1.2;
color: #e8a723;
border: none;
top: 5rem;
align-items: center;
text-align: center;
transition: all 1s;
width: 800px;
}
/* Navigation Styling */
.navbar-custom {
background-color: #285238; /* Dunkelgrün */
display: flex;
align-items: center;
justify-content: space-between; /* Trennung zwischen Brand und Menu */
padding: 15px 20px; /* Erhöhte Höhe der Navbar */
position: fixed; /* Fixiert die Navigation oben */
top: 0; /* Setzt sie an den oberen Rand */
left: 0;
right: 0;
z-index: 10; /* Über dem Hintergrundvideo */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Brand-Logo in der Navigation */
.navbar-brand {
font-family: 'Bangers';
font-size: 2rem;
color: #e8a723; /* Gelb */
text-decoration: none;
margin-left: 10px;
letter-spacing: 0.05em;
}
.navbar-brand:hover {
border-radius: 15px; /* Abrundung der Ecken bei Hover */
color: white;
}
.UEBERSCHRIFT{
font-family: "bangers";
font-size:1.7rem;
color: #e8a723;
text-decoration: none;
background-color: transparent;
box-shadow: none;
border:0;
letter-spacing: 0.05em;
}
.UEBERSCHRIFT:hover{
color:white;
}
.UNTERUEBERSCHRIFT{
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
}
/* Menülinks in der Navigation */
.menu {
display: flex;
gap: 20px;
align-items: center;
font-family: "bangers"; /* Helvetica für Menütexte */
}
.menu-link {
color: white;
text-decoration: none;
font-size: 1rem;
padding: 5px 10px;
border-radius: 5px;
transition: background-color 0.3s ease-in-out, color 0.3s;
}
.menu-link:hover {
background-color: #e8a723; /* Gelber Hover-Effekt */
color: #285238; /* Dunkelgrün */
}
/* Dropdown Menü Styling */
.dropdown {
position: relative;
}
.dropbtn {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 1rem;
padding: 5px 10px;
border-radius: 5px;
transition: background-color 0.3s ease-in-out, color 0.3s;
}
.dropbtn:hover {
background-color: #e8a723; /* Gelber Hover-Effekt */
color: #285238; /* Dunkelgrün */
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 150px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
border-radius: 5px;
top: 100%;
left: 0;
z-index: 3;
}
.dropdown-content a {
color: #285238; /* Dunkelgrün */
text-decoration: none;
display: block;
padding: 10px;
font-size: 0.9rem;
}
.dropdown-content a:hover {
background-color: #e8a723; /* Gelber Hover-Effekt */
color: #285238;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*Index-Seite*/
.STARTBUTTON-INDEX{
position: absolute;
justify-content: center;
background-color: transparent;
border: 0;
font-family: "bangers";
font-size: 12rem;
line-height: 1.1;
color: #e8a723;
top: 25%;
left: 20%;
text-align: center;
width:60%;
visibility: visible;
transition-delay: 0s;
cursor:pointer;
}
.STARTBUTTON-INDEX:hover {
transform: scale(1.3);
}
.KLEIN-INDEX{
position: absolute;
top: 10%;
left:20%;
font-size: 5rem;
transform: none;
cursor: auto;
}
.KLEIN-INDEX:hover{
transform: none;
}
.SCROLL-INDEX{
position: absolute;
justify-content: center;
align-items:center;
top: 33%;
left: 28%;
width:45%;
height:45%;
background-color:transparent;
font-family:"open sans";
font-size: 2rem;
color:#FFFFFF;
text-align: justify;
overflow:hidden;
visibility: hidden;
}
.MINI-INDEX{
position: relative;
height: 50%;
align-items: center;
left: 30%;
}
.PAUSE{
position:absolute;
bottom: 10%;
left: 31%;
height:5%;
width: 12%;
font-family: "Bangers";
font-size: 1.5rem;
color: #e8a723;
text-decoration: none;
letter-spacing: 0.05em;
background-color: #285238;
border: 2px solid #285238;
border-radius: 10px;
z-index: 5;
visibility: hidden;
cursor: pointer;
}
.PAUSE:hover {
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.NORMAL{
position:absolute;
bottom: 10%;
left: 44%;
height:5%;
width: 12%;
font-family: "Bangers";
font-size: 1.5rem;
color: #e8a723;
text-decoration: none;
letter-spacing: 0.05em;
background-color: #285238;
border: 2px solid #285238;
border-radius: 10px;
z-index: 5;
visibility: hidden;
cursor: pointer;
}
.NORMAL:hover {
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.SCHNELLER{
position:absolute;
bottom: 10%;
left: 57%;
height:5%;
width: 12%;
font-family: "Bangers";
font-size: 1.5rem;
color: #e8a723;
text-decoration: none;
letter-spacing: 0.05em;
background-color: #285238;
border: 2px solid #285238;
border-radius: 10px;
z-index: 5;
visibility: hidden;
cursor: pointer;
}
.SCHNELLER:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.WELT-INDEX{
position:absolute;
top: 35.8%;
Left:41.7%;
height: 22%;
width:auto;
visibility: hidden;
transition-property: height, top, left; /* betreffende Deklarationen (über Pseudoklassen) */
transition-duration: 5s; /* Dauer (n) */
transition-timing-function: ease-in-out; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
transition-delay: 2s;
}
.GROSS-INDEX{
top: 20%;
left: 45%;
height: 60%;
width:auto;
visibility:visible;
}
.WELT-INDEX:focus{
height: 60%;
}
.BLASE-INDEX{
position: absolute;
padding: 25px;
top:23%;
left:22%;
height:auto;
width: 13%;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
border-radius: 20px 20px 20px 0px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
z-index: 4;
visibility:hidden;
}
.HERO-INDEX{
position:absolute;
height:0%;
top:35%;
left:0%;
visibility:hidden;
transition-property: height, top, left; /* betreffende Deklarationen (über Pseudoklassen) */
transition-duration: 5s; /* Dauer (n) */
transition-timing-function: ease-in-out; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
transition-delay: 2s;
}
.HEROGROSS-INDEX{
height:40%;
bottom:15%;
top:auto;
left:6%;
visibility:visible;
}
.HELFEN-INDEX{
position:absolute;
bottom:20%;
left:23%;
height:7%;
width: auto;
padding: 15px;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
visibility: hidden;
cursor: pointer;
}
.HELFEN-INDEX:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.ZEIGEN-TEXT{
transition-property: all;
transition-delay: 1.5s;
visibility: visible;
opacity: 1;
}
.BLASEZEIGEN-INDEX{
transition-property: visibility;
transition-delay: 7s;
visibility: visible;
}
/* Missionsstart-Startseite*/
.WELT-STARTSEITE{
position:absolute;
top: 20%;
left: 45%;
height: 60%;
width:auto;
visibility:visible;
transition-property: height, top, left; /* betreffende Deklarationen (über Pseudoklassen) */
transition-duration: 5s; /* Dauer (n) */
transition-timing-function: ease-in-out; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
transition-delay: 2s;
}
.BLASE-STARTSEITE{
position: absolute;
padding: 25px;
top:23%;
left:22%;
height:auto;
width: 13%;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
border-radius: 20px 20px 20px 0px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
z-index: 4;
visibility:visible;
}
.HERO-STARTSEITE{
position:absolute;
height:40%;
width:auto;
bottom:15%;
left:6%;
visibility:visible;
}
.HELFEN-STARTSEITE{
position:absolute;
bottom:20%;
left:23%;
height:7%;
width: auto;
padding: 15px;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
cursor: pointer;
}
.HELFEN-STARTSEITE:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
/*Codeeingabe*/
.HELD-CODE{
position:absolute;
top:35%;
left:10%;
height: 60%;
width: auto;
}
#sprechblase {
position: absolute;
top:13.5%;
left:30%;
width:20%;
height:34%;
border-radius: 20px 20px 20px 0px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
padding: 20px;
padding-top: 5px;
text-align: left;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
}
.HEADER-CODE{
position:absolute;
top:25%;
left:60%;
font-family: "bangers";
font-size:4rem;
color: #e8a723;
}
.CODE{
position: absolute;
top:42%;
left: 60%;
border-radius: 15px;
padding: 20px;
max-width: 40%;
text-align: left;
font-family: "bangers";
font-size: 2rem;
color: #285238;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.EINGEBEN{
position:absolute;
top:55%;
left: 60%;
height: 5%;
width: 10%;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
border-color: #285238;
text-decoration: none;
background-color: #285238;
border-radius: 10px;
}
.EINGEBEN:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.FEHLER-CODE{
position:absolute;
bottom:6%;
left: 18%;
height: auto;
width: auto;
padding: 20px;
font-family: "bangers";
font-size: 1.5rem;
letter-spacing: 0.05em;
color: #e8a723;
text-decoration: none;
background-color: #285238;
border-radius: 10px;
}
.FEHLER-CODE:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.FEHLERMELDUNG-CODE{
position: absolute;
top:13.5%;
left: 30%;
width:20%;
height:31%;
border-radius: 20px 20px 20px 0px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
padding: 20px;
padding-bottom:30px;
text-align: left;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
visibility: hidden;
z-index:5;
}
/*allgemein Weltkarten-Styles*/
.WELTKARTE{
position:absolute;
top:5%;
left:0%;
width:100%;
height:auto;
}
.PUNKT{
height: 25px;
width: 25px;
border-radius: 40%;
background-color: #e8a723;
z-index: 3;
}
.PUNKT:hover{
cursor: url('../images/InfoI.gif'),auto;
background-color: #45a049;
}
/*Superhelden-Auswahl*/
.SCHRIFTZUG-AUSWAHL{
position: absolute;
top: 40%;
left: 8%;
font-family: "bangers";
font-size: 5rem;
color: #e8a723;
line-height: 1.1;
letter-spacing: 0.05em;
}
.BILD-AUSWAHL{
position: fixed;
height: 30%;
width: auto;
margin: 5rem;
}
.BILDINFOBOX-SCARLET-AUSWAHL{
position: absolute;
bottom:12%;
left: 5%;
height:70%;
width: auto;
visibility: hidden;
}
.HILFSBOX-FLIEGEN-AUSWAHL{
position: absolute;
bottom:12%;
left: 12%;
height:70%;
width: 25%;
background-color: transparent;
z-index:6;
}
.BILDINFOBOX-KNIGHT-AUSWAHL{
position: absolute;
bottom:15%;
left: 5%;
height:70%;
width: auto;
transform: rotateY(0deg);
animation-name: FLIEGENAUSWAHL; /* Name (keyframe) */
animation-duration: 2s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused; /* für JavaScript (running, paused) */
z-index:5;
}
@keyframes FLIEGENAUSWAHL {
49.99% {
bottom:50%;
left: 60%;
transform: rotateY(0deg);
}
50% {
bottom:50%;
left: 60%;
transform: rotateY(180deg);
}
75%{
bottom:15%;
left: 60%;
transform: rotateY(180deg);
}
99.99%{
bottom:15%;
left: 5%;
transform: rotateY(180deg);
}
100% {
bottom:15%;
left: 5%;
transform: rotateY(0deg);
}
}
.HILFSBOX-BLUMEN-AUSWAHL{
position: absolute;
bottom:12%;
left: 12%;
height:70%;
width: 25%;
background-color: transparent;
z-index:6;
}
.BILDINFOBOX-BLAZE-AUSWAHL{
position: absolute;
bottom:12%;
left: 10%;
height:75%;
width: auto;
transform: rotateY(180deg);
}
.BLUMEN-INFOBOX-AUSWAHL{
position: absolute;
bottom:0%;
left: 3%;
height:50%;
width: auto;
visibility:hidden;
z-index:5;
}
.HILFSBOX-RENNEN-AUSWAHL{
position: absolute;
bottom:12%;
left: 15%;
height:70%;
width: 25%;
background-color: transparent;
z-index:6;
}
.BILDINFOBOX-THUNDER-AUSWAHL{
position: absolute;
bottom:12%;
left: 10%;
height:70%;
width: auto;
animation-name: RENNENAUSWAHL; /* Name (keyframe) */
animation-duration: 0.5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused; /* für JavaScript (running, paused) */
z-index:5;
}
@keyframes RENNENAUSWAHL{
49.99% {
bottom:12%;
left: 90%;
transform: rotateY(0deg);
}
50% {
bottom:12%;
left: 90%;
transform: rotateY(180deg);
}
99.99%{
bottom:12%;
left: 10%;
transform: rotateY(180deg);
}
100% {
bottom:12%;
left: 10%;
transform: rotateY(0deg);
}
}
.BILDINFOBOX-TITAN-AUSWAHL{
position: absolute;
bottom:12%;
left: 10%;
height:70%;
width: auto;
z-index:6;
}
.RAHMEN-INFO{
flex-direction: row;
position: absolute;
padding: 30px;
top: 15%;
left: 25%;
height:60%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: none;
box-shadow: none;
visibility:hidden;
z-index:6;
}
.BLACKSCREEN{
position: absolute;
top:0%;
left: 0%;
height:100%;
width: 100%;
visibility: hidden;
z-index:4;
overflow: hidden;
}
.BILDINFOBOX-SONIC-AUSWAHL{
position: absolute;
bottom:15%;
left: 20%;
height:68%;
width: auto;
z-index:5;
}
.SCHUTZSCHILD-AUSWAHL{
position: absolute;
bottom:1%;
left: 1%;
height:96%;
width: auto;
visibility: hidden;
opacity: 0.3;
z-index:3;
animation-name: DREHENAUSWAHL; /* Name (keyframe) */
animation-duration: 5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: infinite; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: running;
}
@keyframes DREHENAUSWAHL { /* Prozentwerte beziehen sich auf die Dauer der Animation */
50% { /* bei 50% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(180deg);
}
100% { /* bei 100% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(360deg);
}
}
.TEXTBLOCK-AUSWAHL{
position: absolute;
top: 21%;
left: 50%;
height: auto;
width: 43%;
z-index:4;
}
.NAME-AUSWAHL{
position: absolute;
top: 8%;
left: 50%;
font-family: "bangers";
color: #e8a723;
font-size: 4rem;
letter-spacing: 0.05em;
text-align: left;
}
.TITEL-AUSWAHL{
font-family: "open sans";
color: #285238;
font-size: 1.5rem;
text-align: left;
}
.TEXT-AUSWAHL{
font-family: "open sans";
color: #285238;
font-size: 1.5rem;
text-align: justify;
}
.AUSWAHL{
position: absolute;
padding: 8px;
bottom: 7%;
right: 23%;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
cursor: pointer;
z-index:4;
}
.AUSWAHL:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.AUSWAHL-TITAN{
position: absolute;
padding: 8px;
bottom: 7%;
right: 23%;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
cursor: pointer;
visibility: hidden;
z-index:4;
}
.AUSWAHL-TITAN:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.SCARLETSHADE {
position: absolute;
top: 10%;
left: 40%;
cursor: pointer;
}
.GOLDENKNIGHT {
position: absolute;
top: 10%;
left: 60%;
cursor: pointer;
}
.GREENBLAZE {
position: absolute;
top: 10%;
left: 80%;
cursor: pointer;
}
.THUNDERBOLT {
position: absolute;
top: 50%;
left: 35%;
cursor: pointer;
}
.CYBERTITAN {
position: absolute;
top: 50%;
left: 55%;
cursor: pointer;
}
.SONICSHIELD {
position: absolute;
top: 50%;
left:75%;
cursor: pointer;
}
.INFOSCARLETSHADE {
flex-direction: row;
position: absolute;
padding: 30px;
top: 15%;
left: 25%;
height:60%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
}
.INFOGOLDENKNIGHT {
flex-direction: row;
position: absolute;
padding: 30px;
top: 15%;
left: 25%;
height:60%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
}
.INFOGREENBLAZE {
flex-direction: row;
position: absolute;
padding: 30px;
top: 15%;
left: 25%;
height:60%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
}
.INFOTHUNDERBOLT {
flex-direction: row;
position: absolute;
padding: 30px;
top: 15%;
left: 25%;
height:60%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
}
.INFOCYBERTITAN {
flex-direction: row;
position: absolute;
padding: 30px;
top: 15%;
left: 25%;
height:60%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
}
.INFOSONICSHIELD {
flex-direction: row;
position: absolute;
padding: 30px;
top: 15%;
left: 25%;
height:60%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
}
#buttonSCS{
position: absolute;
right:20px;
top: 20px;
}
#buttonGK{
position: absolute;
right:20px;
top: 20px;
}
#buttonGB{
position: absolute;
right:20px;
top: 20px;
}
#buttonTB{
position: absolute;
right:20px;
top: 20px;
}
#buttonCT{
position: absolute;
right:20px;
top: 20px;
}
.TITAN-ZU{
visibility: hidden;
}
#buttonSOS{
position: absolute;
right:20px;
top: 20px;
}
/*Styles Klima-Schäden-Seiten*/
h1{
font-family: "open sans";
color:#e8a723;
font-size: 2rem;
padding: 0px;
margin: 0px;
margin-bottom: 20px;
}
.KARTE-ANSEHEN{
position: absolute;
padding: 15px 20px;
bottom: 7%;
right: 23%;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
cursor: pointer;
}
.KARTE-ANSEHEN:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.SPRECHBLASE-KLIMA {
position: absolute;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
bottom:29%;
left:14%;
height:auto;
width: 10%;
border-radius: 20px 20px 20px 0px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
font-family: "open sans";
font-size: 1.3rem;
color:#285238;
text-align: left;
visibility: hidden;
z-index:3;
}
.LOS-KLIMA{
position: absolute;
bottom: 15%;
left: 17%;
display: inline-block;
padding: 15px 20px;
font-family: 'Bangers';
font-size: 2rem;
text-decoration: none;
letter-spacing: 0.05em;
color: #e8a723;
background-color: #285238;
border: 2px;
border-color: white;
border-radius: 8px;
cursor: pointer;
visibility: hidden;
z-index:3;
}
.LOS-KLIMA:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.EUROPA-KLIMA{
position:absolute;
top: 27%;
left:50%;
}
.INFOEUROPA-KLIMA{
position: absolute;
top: 28%;
left:52%;
height: auto;
width: 25%;
padding-top:10%;
padding: 40px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.CHINA-KLIMA{
position:absolute;
top: 27%;
left:71%;
}
.INFOCHINA-KLIMA{
position: absolute;
top: 28%;
right:30%;
height: auto;
width: 30%;
padding: 40px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.SUEDOSTASIEN-KLIMA{
position:absolute;
top: 50%;
left:82%;
}
.INFOSUEDOSTASIEN-KLIMA{
position: absolute;
bottom: 10%;
right:19%;
height: auto;
width: 40%;
padding: 40px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.AUSTRALIEN-KLIMA{
position:absolute;
bottom:33%;
right:12%;
}
.INFOAUSTRALIEN-KLIMA{
position: absolute;
bottom:15%;
right:14%;
height: auto;
width: 30%;
padding: 40px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.ANTARKTIS-KLIMA{
position:absolute;
bottom:4%;
right:23%;
}
.INFOANTARKTIS-KLIMA{
position: absolute;
bottom:8%;
right:25%;
height: auto;
width: 30%;
padding: 40px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.CHILE-KLIMA{
position:absolute;
top: 70%;
left:30.5%;
}
.INFOCHILE-KLIMA{
position: absolute;
bottom:15%;
left:33%;
height: auto;
width: 30%;
padding: 40px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.AMAZONAS-KLIMA{
position:absolute;
top: 53%;
left:32%;
}
.INFOAMAZONAS-KLIMA{
position: absolute;
bottom:25%;
left:34%;
height: auto;
width: 30%;
padding: 40px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.ATLANTIK-KLIMA{
position:absolute;
top: 35%;
left:38%;
}
.INFOATLANTIK-KLIMA{
position: absolute;
top: 25%;
left:40%;
height:auto;
width: 35%;
padding: 40px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.KANADA-KLIMA{
position:absolute;
top: 12%;
left:38%;
}
.INFOKANADA-KLIMA{
position: absolute;
top: 17%;
left:38%;
height: auto;
width: 30%;
padding: 40px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.USA-KLIMA{
position:absolute;
top: 33%;
left:25%;
}
.INFOUSA-KLIMA{
position: absolute;
top: 25%;
left:27%;
height: auto;
width: 30%;
padding: 40px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.AFRIKA-KLIMA{
position:absolute;
top: 41%;
left:50%;
}
.INFOAFRIKA-KLIMA{
position: absolute;
top: 39%;
left:52%;
height: auto;
width: 30%;
padding-top: 5px;
padding: 40px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
/*Superhelden Klimaschäden*/
/*Scarlet*/
.BILDINFOBOX-SCARLET{
position: absolute;
top:10%;
left: 5%;
height:70%;
width: auto;
visibility: visible;
}
.SCARLET{
position:absolute;
bottom:4%;
left: 2%;
height:35%;
background-color: transparent;
border:5px;
border-color: transparent;
visibility: hidden;
}
/*Knight*/
.HILFSBOX-FLIEGEN-KARTE{
position: absolute;
bottom:5%;
left: 3%;
height:30%;
width: 10%;
background-color: transparent;
z-index:6;
}
.BILDINFOBOX-KNIGHT{
position: absolute;
bottom:7%;
left: 5%;
height:80%;
width: auto;
transform: rotateY(0deg);
animation-name: FLIEGEN_knight; /* Name (keyframe) */
animation-duration: 1.5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused; /* für JavaScript (running, paused) */
visibility: visible;
z-index:5;
}
@keyframes FLIEGEN_knight {
49.99% {
top:1%;
left: 60%;
transform: rotateY(180deg);
}
50% {
bottom:60%;
left: 60%;
transform: rotateY(0deg);
}
100% {
bottom:7%;
left: 5%;
transform: rotateY(0deg);
}
}
.BILDINFOBOX-KNIGHT-ENDE{
position: absolute;
bottom:7%;
left: 5%;
height:80%;
width: auto;
transform: rotateY(0deg);
animation-name: FLIEGEN_knight; /* Name (keyframe) */
animation-duration: 1.5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused; /* für JavaScript (running, paused) */
visibility: hidden;
z-index:5;
}
.KNIGHT{
position:absolute;
bottom:4%;
left: 2%;
height:35%;
background-color: transparent;
border:5px;
border-color: transparent;
visibility: hidden;
transform: rotateY(0deg);
animation-name: FLIEGEN_MISSION; /* Name (keyframe) */
animation-duration: 2s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: forwards; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused; /* für JavaScript (running, paused) */
animation-finished: reverse;
z-index:5;
}
@keyframes FLIEGEN_MISSION {
49.99% {
bottom:60%;
left: 60%;
transform: rotateY(0deg);
}
50% {
bottom:60%;
left: 60%;
transform: rotateY(180deg);
}
75%{
bottom:4%;
left:60%;
transform: rotateY(180deg);
}
99.99%{
bottom:4%;
left: 2%;
transform: rotateY(180deg);
}
100% {
bottom:4%;
left: 2%;
transform: rotateY(0deg);
}
}
/*Blaze*/
.BILDINFOBOX-BLAZE{
position: absolute;
bottom:12%;
left: 10%;
height:75%;
width: auto;
transform: rotateY(180deg);
visibility: visible;
}
.BLUMEN-INFOBOX{
position: absolute;
bottom:0%;
left: 3%;
height:50%;
width: auto;
visibility:hidden;
z-index:5;
}
.BLAZE{
position:absolute;
bottom:4%;
left: 2%;
height:35%;
width:auto;
transform: rotateY(180deg);
visibility: hidden;
}
.BLUMEN{
position:absolute;
bottom:0%;
left: 0%;
height:23%;
width:auto;
visibility: hidden;
}
/*Tunder*/
.BILDINFOBOX-THUNDER{
position: absolute;
bottom:10%;
left: 7%;
height:70%;
width: auto;
visibility: visible;
animation-name: RENNEN; /* Name (keyframe) */
animation-duration: 0.2s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused; /* für JavaScript (running, paused) */
z-index:5;
}
@keyframes RENNEN{
49.99% {
bottom:10%;
left: 90%;
transform: rotateY(0deg);
}
50% {
bottom:10%;
left: 90%;
transform: rotateY(180deg);
}
99.99%{
bottom:10%;
left: 7%;
transform: rotateY(180deg);
}
100% {
bottom:10%;
left: 7%;
transform: rotateY(0deg);
}
}
.THUNDER{
position:absolute;
bottom:4%;
left: 2%;
height:35%;
background-color: transparent;
border:5px;
border-color: transparent;
visibility: hidden;
animation-name: RENNEN; /* Name (keyframe) */
animation-duration: 0.2s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused; /* für JavaScript (running, paused) */
z-index:5;
}
@keyframes RENNEN{
49.99% {
bottom:4%;
left: 90%;
transform: rotateY(0deg);
}
50% {
bottom:4%;
left: 90%;
transform: rotateY(180deg);
}
99.99%{
bottom:4%;
left: 2%;
transform: rotateY(180deg);
}
100% {
bottom:4%;
left: 2%;
transform: rotateY(0deg);
}
}
/*Titan*/
.RAHMEN{
flex-direction: row;
position: absolute;
padding: 30px;
top: 15%;
left: 25%;
height:60%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: none;
box-shadow: none;
visibility:visible;
z-index:6;
}
.BILDINFOBOX-TITAN{
position: absolute;
bottom:12%;
left: 8%;
height:70%;
width: auto;
visibility: visible;
z-index:6;
}
.TITAN{
position:absolute;
bottom:4%;
left: 2%;
height:35%;
background-color: transparent;
border:5px;
border-color: transparent;
visibility: hidden;
z-index:6;
}
.BLACKSCREEN{
position: absolute;
top:0%;
left: 0%;
height:100%;
width: 100%;
visibility: hidden;
z-index:5;
overflow: hidden;
}
/*Sonic*/
.BILDINFOBOX-SONIC{
position: absolute;
bottom:15%;
left: 20%;
height:68%;
width: auto;
z-index:5;
}
.SCHUTZSCHILD{
position: absolute;
bottom:1%;
left: 1%;
height:96%;
width: auto;
visibility: hidden;
opacity: 0.3;
z-index:3;
animation-name: DREHEN; /* Name (keyframe) */
animation-duration: 5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: infinite; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: running;
}
.SONIC{
position:absolute;
bottom:5.5%;
left: 5.5%;
height:35%;
background-color: transparent;
border:5px;
border-color: transparent;
visibility: hidden;
}
.SCHUTZSCHILD-GROSS{
position: absolute;
bottom:-2.5%;
left: -2.5%;
height:50%;
width: auto;
visibility: hidden;
opacity: 0.3;
z-index:2;
animation-name: DREHEN; /* Name (keyframe) */
animation-duration: 5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: infinite; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: running;
}
@keyframes DREHEN { /* Prozentwerte beziehen sich auf die Dauer der Animation */
50% { /* bei 50% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(180deg);
}
100% { /* bei 100% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(360deg);
}
}
/*Kapitelstarts */
.SCARLET-KAPITELSTART{
position: absolute;
bottom: 10%;
right:5%;
height:35%;
width:auto;
animation-name: DREHEN; /* Name (keyframe) */
animation-duration: 1.5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused;
visibility: visible;
}
.SCARLET-KAPITELSTART:hover{
visibility: hidden;
}
@keyframes DREHEN { /* Prozentwerte beziehen sich auf die Dauer der Animation */
50% { /* bei 50% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(180deg);
}
100% { /* bei 100% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(360deg);
}
}
.HILFSBOX-FLIEGEN-KAPITELSTART{
position: absolute;
bottom: 10%;
right:5%;
height:35%;
width:15%;
background-color: transparent;
z-index:6;
}
.KNIGHT-KAPITELSTART{
position: absolute;
bottom: 10%;
right:5%;
height:35%;
width:auto;
transform: rotateY(180deg);
animation-name: DREHEN; /* Name (keyframe) */
animation-duration: 1.5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused;
visibility: visible;
z-index:5;
}
@keyframes DREHEN { /* Prozentwerte beziehen sich auf die Dauer der Animation */
50% { /* bei 50% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(180deg);
}
100% { /* bei 100% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(360deg);
}
}
.KNIGHT-KAPITELSTART-ENDE{
position: absolute;
bottom: 10%;
right:5%;
height:35%;
width:auto;
transform: rotateY(180deg);
animation-name: DREHEN; /* Name (keyframe) */
animation-duration: 1.5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused;
visibility: hidden;
}
@keyframes DREHEN { /* Prozentwerte beziehen sich auf die Dauer der Animation */
50% { /* bei 50% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotateY(180deg);
transform: rotateX(180deg);
}
100% { /* bei 100% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotateY(180deg);
transform: rotateX(360deg);
}
}
.BLAZE-KAPITELSTART{
position: absolute;
bottom: 10%;
right:7%;
height:40%;
width:auto;
animation-name: DREHEN; /* Name (keyframe) */
animation-duration: 2s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused;
visibility: visible;
}
@keyframes DREHEN { /* Prozentwerte beziehen sich auf die Dauer der Animation */
50% { /* bei 50% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(180deg);
}
100% { /* bei 100% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(360deg);
}
}
.BLUMEN-KAPITELSTART{
position:absolute;
bottom:0%;
right: 1%;
height:28%;
width:auto;
visibility: hidden;
}
.THUNDER-KAPITELSTART{
position: absolute;
bottom: 10%;
right:7%;
height:35%;
width:auto;
animation-name: DREHEN; /* Name (keyframe) */
animation-duration: 1.5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused;
transform: rotateY(180deg);
visibility: visible;
}
.THUNDER-KAPITELSTART:hover{
visibility: hidden;
}
@keyframes DREHEN { /* Prozentwerte beziehen sich auf die Dauer der Animation */
50% { /* bei 50% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotateX(180deg);
}
100% { /* bei 100% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotateX(360deg);
}
}
.TITAN-KAPITELSTART{
position: absolute;
bottom: 6%;
right:7%;
height:40%;
width:auto;
transform: rotateY(180deg);
animation-name: DREHEN; /* Name (keyframe) */
animation-duration: 1.5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused;
z-index:6;
visibility: visible;
}
@keyframes DREHEN { /* Prozentwerte beziehen sich auf die Dauer der Animation */
50% { /* bei 50% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotateY(180deg);
transform: rotate(180deg);
}
100% { /* bei 100% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotateY(180deg);
transform: rotate(360deg);
}
}
.SONIC-KAPITELSTART{
position: absolute;
bottom: 10%;
right:9%;
height:40%;
width:auto;
animation-name: DREHEN; /* Name (keyframe) */
animation-duration: 1.5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused;
visibility: visible;
}
@keyframes DREHEN { /* Prozentwerte beziehen sich auf die Dauer der Animation */
50% { /* bei 50% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(180deg);
}
100% { /* bei 100% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(360deg);
}
}
.SCHUTZSCHILD-KAPITELSTART{
position: absolute;
bottom:1%;
right: 0%;
height:57%;
width: auto;
visibility: hidden;
opacity: 0.3;
z-index:3;
animation-name: DREHENKAPITELSTART; /* Name (keyframe) */
animation-duration: 5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: infinite; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: running;
}
@keyframes DREHENKAPITELSTART{ /* Prozentwerte beziehen sich auf die Dauer der Animation */
50% { /* bei 50% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(180deg);
}
100% { /* bei 100% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(360deg);
}
}
.GRATULATION{
position: absolute;
padding: 25px;
top:23%;
right:21%;
height:auto;
width: 13%;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
border-radius: 20px 20px 0px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
z-index: 4;
visibility: hidden;
}
.BTNLINKS-WIND{
display: inline-block;
padding: 20px 30px;
font-family: 'Bangers';
font-size: 2rem;
text-decoration: none;
letter-spacing: 0.05em;
color: #e8a723;
background-color: #285238;
border: 2px;
border-color: #285238;
border-radius: 8px;
cursor: pointer;
z-index:4;
}
.BTNLINKS-WIND:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.HEADER-WIND{
position: absolute;
top: 16%;
left: 8%;
font-family: "bangers";
color: #e8a723;
font-size: 5rem;
}
.LANDSCHAFT-WINDRAD{
position:absolute;
bottom:10%;
left: 3%;
height:40%;
width:auto;
}
.INFOBLASE-WIND{
position: absolute;
top: 26%;
left: 36.5%;
height: 12%;
width: auto;
z-index:4;
cursor: pointer;
}
.INFOTEXT-WIND{
position: absolute;
top: 31%;
left: 43%;
font-family: "open sans";
font-size: 1.5rem;
color: #e8a723;
text-align: left;
cursor: pointer;
}
.TEXTBLOCK-WIND{
position: absolute;
right:5%;
top: 13%;
width:39%;
height: auto;
font-family: "open sans";
font-size: 2rem;
color: #285238;
text-align: left;
visibility: visible;
}
.ANTWORTEN-WIND{
position: absolute;
left: 18%;
}
.TEXT-WIND{
font-family: "open sans";
font-size: 2rem;
color:#285238;
text-align:left;
}
.PRUEFEN-WIND{
display: inline-block;
padding: 20px 30px;
font-family: 'Bangers';
font-size: 2rem;
text-decoration: none;
letter-spacing: 0.05em;
color: #e8a723;
background-color: #285238;
border: 2px;
border-color: white;
border-radius: 8px;
cursor: pointer;
}
.PRUEFEN-WIND:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.ABSCHLUSSTEXT-KAPITELSTART{
position: absolute;
bottom: 20%;
right: 4%;
font-family: "open sans";
font-size: 2rem;
color: #285238;
text-align: left;
width: 32%;
height: auto;
visibility:hidden;
z-index:5;
}
.BTNLINKS{
display: inline-block;
padding: 20px 30px;
font-family: 'Bangers';
font-size: 2rem;
text-decoration: none;
letter-spacing: 0.05em;
color: #e8a723;
background-color: #285238;
border: 2px;
border-color: #285238;
border-radius: 8px;
cursor: pointer;
z-index:5;
}
.BTNLINKS:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.HEADER-SOLAR{
position: absolute;
top: 16%;
left: 8%;
font-family: "bangers";
color: #e8a723;
font-size: 5rem;
}
.SOLARPANEL{
position:absolute;
bottom:7%;
left: 3%;
height:60%;
width:auto;
}
.INFOBLASE{
position: absolute;
top: 26%;
left: 36.5%;
height: 12%;
width: auto;
z-index:4;
cursor: pointer;
}
.INFOTEXT{
position: absolute;
top: 31%;
left: 43%;
font-family: "open sans";
font-size: 1.5rem;
color: #e8a723;
text-align: left;
cursor: pointer;
}
.TEXTBLOCK{
position: absolute;
right:5%;
top: 13%;
width:39%;
height: auto;
font-family: "open sans";
font-size: 2rem;
color: #285238;
text-align: left;
visibility: visible;
}
.ANTWORTEN{
position: absolute;
left: 15%;
}
.TEXT{
font-family: "open sans";
font-size: 2rem;
color:#285238;
text-align:left;
}
.PRUEFEN{
display: inline-block;
padding: 20px 30px;
font-family: 'Bangers';
font-size: 2rem;
text-decoration: none;
letter-spacing: 0.05em;
color: #e8a723;
background-color: #285238;
border: 2px;
border-color: white;
border-radius: 8px;
cursor: pointer;
}
.PRUEFEN:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.ABSCHLUSSTEXT{
position: absolute;
top: 23%;
right: 8%;
font-family: "open sans";
font-size: 2rem;
color: #285238;
text-align: left;
width: 32%;
height: auto;
visibility:hidden;
}
.FEHLERMELDUNG{
position: absolute;
padding: 30px;
right: 20%;
top: 20%;
height:auto;
width: 30%;
border-radius: 20px 20px 0px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index: 5;
}
.WEG{
visibility: hidden;
}
#ZU{
position:absolute;
top: 20px;
right: 20px;
}
.CHECKBOX{
height: 1.5rem;
width:1.5rem;
cursor: pointer;
}
/*Spiel Weltkarte */
.INFOBOX{
flex-direction: row;
position: absolute;
padding: 30px;
top: 15%;
left: 25%;
height:60%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility:visible;
z-index:5;
}
.TEXT-START{
position: normal;
top: 7%;
left: 50%;
height: auto;
width: 48%;
font-family: "open sans";
color: #285238;
font-size: 1.7rem;
text-align: left;
}
.KARTE-ANSEHEN{
position: absolute;
padding: 15px 20px;
bottom: 7%;
right: 12%;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
cursor: pointer;
}
.KARTE-ANSEHEN:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.KARTE-ANSEHEN-WASSER{
position: absolute;
padding: 15px 20px;
bottom: 7%;
right: 6%;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
cursor: pointer;
}
.KARTE-ANSEHEN-WASSER:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.PLATZIERUNG{
position: absolute;
height:90%;
width: 90%;
top:10%;
left:5%;
}
.SCARLET-KARTE{
position:absolute;
bottom:4%;
left: 2%;
height:35%;
visibility: hidden;
}
.KNIGHT-KARTE{
position:absolute;
bottom:4%;
left: 2%;
height:35%;
visibility: hidden;
transform: rotateY(0deg);
animation-name: FLIEGEN_Knight; /* Name (keyframe) */
animation-duration: 7s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: 1; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: forwards; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: paused; /* für JavaScript (running, paused) */
animation-finished: reverse;
z-index:5;
}
.BLAZE-KARTE{
position:absolute;
bottom:4%;
left: 2%;
height:35%;
transform: rotateY(180deg);
visibility: hidden;
}
.THUNDER-KARTE{
position:absolute;
bottom:4%;
left: 2%;
height:35%;
visibility: hidden;
}
.TITAN-KARTE{
position:absolute;
bottom:4%;
left: 2%;
height:35%;
visibility: hidden;
}
.SONIC-KARTE{
position:absolute;
bottom:5.5%;
left: 5.5%;
height:35%;
visibility: hidden;
}
.WINDRAD1{
position:absolute;
bottom: 2%;
left: 18%;
height:20%;
width:auto;
z-index: 4;
cursor: pointer;
visibility: hidden;
}
.WINDRAD2{
position:absolute;
bottom:2%;
left: 36%;
height:20%;
width:auto;
z-index: 4;
cursor: pointer;
visibility: hidden;
}
.WINDRAD3{
position:absolute;
bottom:2%;
left: 48%;
height:20%;
width:auto;
z-index: 4;
cursor: pointer;
visibility: hidden;
}
.SOLARPANEL1{
position:absolute;
bottom: 2%;
left: 18%;
height:20%;
width:auto;
z-index: 4;
cursor: pointer;
visibility: hidden;
}
.SOLARPANEL2{
position:absolute;
bottom:2%;
left: 36%;
height:20%;
width:auto;
z-index: 4;
cursor: pointer;
visibility: hidden;
}
.SOLARPANEL3{
position:absolute;
bottom:2%;
left: 48%;
height:20%;
width:auto;
z-index: 4;
cursor: pointer;
visibility: hidden;
}
.WASSERKRAFT1{
position:absolute;
bottom: 2%;
left: 18%;
height:13%;
width:auto;
z-index: 5;
cursor: pointer;
visibility: hidden;
}
.WASSERKRAFT2{
position:absolute;
bottom:2%;
left: 34%;
height:13%;
width:auto;
z-index: 5;
cursor: pointer;
visibility: hidden;
}
.WASSERKRAFT3{
position:absolute;
bottom:2%;
left: 48%;
height:13%;
width:auto;
z-index: 5;
cursor: pointer;
visibility: hidden;
}
.SPRECHBLASE1 {
position: absolute;
bottom:29%;
left:14%;
height:auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
border-radius: 20px 20px 20px 0px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
font-family: "open sans";
font-size: 1.3rem;
color:#285238;
text-align: left;
visibility: hidden;
z-index:4;
}
.SPRECHBLASE2 {
position: absolute;
bottom:29%;
left:14%;
height:auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
border-radius: 20px 20px 20px 0px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
font-family: "open sans";
font-size: 1.3rem;
color:#285238;
text-align: left;
visibility: hidden;
z-index:4;
}
.SPRECHBLASE3 {
position: absolute;
bottom:29%;
left:14%;
height:auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
border-radius: 20px 20px 20px 0px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
font-family: "open sans";
font-size: 1.3rem;
color:#285238;
text-align: left;
visibility: hidden;
z-index:4;
}
.DROP-ELEMENT {
height: 30px;
width: 30px;
border-radius: 40%;
background-color: #e8a723;
z-index: 3;
}
.DROP-ELEMENT:hover{
cursor: url('../images/InfoI.gif'),auto;
background-color: #45a049;
}
.DRAG-ELEMENT {
z-index: 4;
cursor: pointer;
}
#DROPEUROPA{
position: absolute;
top: 18%;
left: 50%;
}
.EUROPABTN{
visibility: visible;
}
.EUROPA-GRUEN{
position: absolute;
top: 18%;
left: 50%;
height: 30px;
width: 30px;
border-radius: 40%;
background-color: #285238;
visibility: hidden;
z-index:4;
}
.EUROPA{
position: absolute;
top: 20%;
left: 52%;
height: auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size:1.5rem;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.EUROPAXL{
position: absolute;
top: 20%;
left: 51%;
height: auto;
width: 25%;
padding-top: 5px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
font-size: 1.5rem;
color: #285238;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:6;
}
.WINDRADEUROPA{
position: absolute;
top: 25.5%;
left: 49.5%;
height:5%;
width: auto;
visibility: hidden;
z-index: 5;
}
#DROPAUSTRALIEN{
position: absolute;
top: 58%;
right: 8%;
}
.AUSTRALIENBTN{
visibility: visible;
}
.AUSTRALIEN-GRUEN{
position: absolute;
top: 60%;
right: 8%;
height: 30px;
width: 30px;
border-radius: 40%;
background-color: #285238;
visibility: hidden;
z-index:4;
}
.AUSTRALIEN{
position: absolute;
top: 62%;
right: 14%;
height: auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size:1.5rem;
text-align: left;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.AUSTRALIENXL{
position: absolute;
bottom:10%;
right: 11%;
height: auto;
width: 10%;
padding-top: 5px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size: 1.3rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.SOLARPANELAUSTRALIEN{
position: absolute;
top: 61%;
right: 12%;
height:5%;
width: auto;
visibility: hidden;
z-index: 5;
}
#DROPASIEN{
position: absolute;
top: 25%;
right:23%;
}
.ASIENBTN{
visibility: visible;
}
.ASIEN-GRUEN{
position: absolute;
top: 25%;
right:23%;
height: 30px;
width: 30px;
border-radius: 40%;
background-color: #285238;
visibility: hidden;
z-index:4;
}
.ASIEN{
position: absolute;
top: 35%;
right:25%;
height: auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size:1.5rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.ASIENXL{
position: absolute;
top: 32%;
right:24%;
height: auto;
width: 25%;
padding-top: 5px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size: 1.5rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:6;
}
.WINDRADASIEN{
position: absolute;
top: 30%;
right:25%;
height:5%;
width: auto;
visibility: hidden;
z-index: 5;
}
#DROPSAHARA{
position: absolute;
top: 35%;
left: 52%;
}
.SAHARABTN{
visibility: visible;
}
.SAHARA-GRUEN{
position: absolute;
top: 35%;
left: 52%;
height: 30px;
width: 30px;
border-radius: 40%;
background-color: #285238;
visibility: hidden;
z-index:4;
}
.SAHARA{
position: absolute;
top: 42%;
left: 38%;
height: auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size:1.5rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.SAHARAXL{
position: absolute;
top: 50%;
left: 28%;
height: auto;
width: 10%;
padding-top: 5px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size: 1.3rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.SOLARPANELSAHARA{
position: absolute;
top: 41%;
left:52%;
height:5%;
width: auto;
visibility: hidden;
z-index: 5;
}
#DROPNIAGARA{
position: absolute;
top: 16%;
left: 22%;
}
.NIAGARABTN{
visibility: visible;
}
.NIAGARA-GRUEN{
position: absolute;
top: 16%;
left: 22%;
height: 30px;
width: 30px;
border-radius: 40%;
background-color: #285238;
visibility: hidden;
z-index:4;
}
.NIAGARA{
position: absolute;
top: 25%;
left: 27%;
height: auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size:1.5rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.NIAGARAXL{
position: absolute;
top: 33%;
left: 15%;
height: auto;
width: 10%;
padding-top: 5px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size: 1.3rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.KRAFTWERKNIAGARA{
position: absolute;
top: 23%;
left: 24%;
height:3%;
width:auto;
visibility: hidden;
z-index:5;
}
#DROPAMAZONAS{
position: absolute;
top:48%;
left: 31%;
}
.AMAZONASBTN{
visibility: visible;
}
.AMAZONAS-GRUEN{
position: absolute;
top:48%;
left: 31%;
height: 30px;
width: 30px;
border-radius: 40%;
background-color: #285238;
visibility: hidden;
z-index:4;
}
.AMAZONAS{
position: absolute;
top:48%;
left: 36%;
height: auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size:1.5rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.AMAZONASXL{
position: absolute;
bottom:43%;
left: 20%;
height: auto;
width: 10%;
padding-top: 5px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size: 1.3rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.KRAFTWERKAMAZONAS{
position: absolute;
top:53%;
left: 31%;
height:3%;
width:auto;
visibility: hidden;
z-index:5;
}
#DROPATLANTIK{
position: absolute;
top:24%;
left: 36%;
}
.ATLANTIKBTN{
visibility: visible;
}
.ATLANTIK-BLAU{
position: absolute;
top:24%;
left: 36%;
height: 30px;
width: 30px;
border-radius: 40%;
background-color: #bce2ea;
visibility: hidden;
z-index:4;
}
.ATLANTIK{
position: absolute;
top:31%;
left: 40%;
height: auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size:1.5rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.ATLANTIKXL{
position: absolute;
bottom:45%;
left: 20%;
height: auto;
width: 10%;
padding-top: 5px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size: 1.3rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.KRAFTWERKATLANTIK{
position: absolute;
top:31%;
left: 36%;
height:3%;
width:auto;
visibility: hidden;
z-index:5;
}
#DROPSIBIRIEN{
position: absolute;
top:10%;
right:20%;
}
.SIBIRIENBTN{
visibility: visible;
}
.SIBIRIEN-GRUEN{
position: absolute;
top:10%;
right:20%;
height: 30px;
width: 30px;
border-radius: 40%;
background-color: #285238;
visibility: hidden;
z-index:4;
}
.SIBIRIEN{
position: absolute;
top:20%;
right: 28%;
height: auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size: 1.5rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.SIBIRIENXL{
position: absolute;
top:20%;
right: 28%;
height: auto;
width: 25%;
padding-top: 5px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size: 1.5rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:6;
}
.WINDRADSIBIRIEN{
position: absolute;
top:15%;
right:22%;
height:5%;
width: auto;
visibility: hidden;
z-index: 5;
}
#DROPMEXIKO{
position: absolute;
top:34%;
left: 17.5%;
}
.MEXIKOBTN{
visibility: visible;
}
.MEXIKO-GRUEN{
position: absolute;
top:34%;
left: 17.5%;
height: 30px;
width: 30px;
border-radius: 40%;
background-color: #285238;
visibility: hidden;
z-index:4;
}
.MEXIKO{
position: absolute;
top:35%;
left: 23%;
height: auto;
width: 10%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size:1.5rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.MEXIKOXL{
position: absolute;
top:45%;
left: 19%;
height: auto;
width: 10%;
padding-top: 5px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: #285238;
font-size: 1.3rem;
background-color: white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
.SOLARPANELMEXIKO{
position: absolute;
top:38%;
left: 20.5%;
height:5%;
width: auto;
visibility: hidden;
z-index: 5;
}
.FEHLERMELDUNG-KARTE{
position: absolute;
top: 45%;
left: 40%;
height:10%;
width: 15%;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
font-family: "open sans";
color: brown;
font-size: 2rem;
text-align: center;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:5;
}
#SCHLIESSEN{
position: absolute;
top:15px;
right: 15px;
}
.HURRA{
position: absolute;
padding: 25px;
top:48%;
left:13%;
height:20%;
width: 10%;
font-family: "open sans";
color: #285238;
text-align: left;
border-radius: 20px 20px 20px 0px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
z-index: 5;
visibility: hidden;
}
.FEUERWERK-LINKS{
position: absolute;
top:20%;
left:5%;
height: auto;
width:30%;
visibility: hidden;
z-index: 4;
}
.FEUERWERK-RECHTS{
position: absolute;
top:20%;
right:5%;
height: auto;
width:30%;
visibility: hidden;
z-index: 4;
}
.INFOBOX-WEITER {
flex-direction: row;
position: absolute;
padding: 30px;
top: 15%;
left: 25%;
height:60%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility:hidden;
z-index:5;
}
.BILDINFOBOX-ENDE{
position: absolute;
top:10%;
left: 5%;
height:70%;
width: auto;
visibility: hidden;
}
.BILDINFOBOX-ENDE-BLAZE{
position: absolute;
bottom:12%;
left: 10%;
height:75%;
width: auto;
transform: rotateY(180deg);
visibility: hidden;
}
.BILDINFOBOX-ENDE-SONIC{
position: absolute;
bottom:15%;
left: 20%;
height:68%;
width: auto;
z-index:5;
visibility: hidden;
}
.SCHUTZSCHILD-ENDE{
position: absolute;
bottom:1%;
left: 1%;
height:96%;
width: auto;
visibility: hidden;
opacity: 0.3;
z-index:3;
animation-name: DREHENENDE; /* Name (keyframe) */
animation-duration: 5s; /* Dauer (n) */
animation-timing-function: linear; /* Geschwindigkeit (ease, ease-in, ease-out, ease-in-out, linear) */
animation-delay: 0s; /* Verzögerung (n) */
animation-iteration-count: infinite; /* Wiederholungen (n, infinite) */
animation-direction: normal; /* Abspielrichtung (normal, reverse, alternate, alternate-reverse) */
animation-fill-mode: none; /* Endzustand (none, forwards, backwards, both) */
animation-play-state: running;
}
@keyframes DREHENENDE{ /* Prozentwerte beziehen sich auf die Dauer der Animation */
50% { /* bei 50% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(180deg);
}
100% { /* bei 100% der Dauer werden die folgenden Deklarationen dargestellt */
transform: rotate(360deg);
}
}
.TEXT-ENDE{
position: absolute;
top: 7%;
left: 50%;
height: auto;
width: 48%;
font-family: "open sans";
color: #285238;
font-size: 1.6rem;
text-align: left;
}
.BTNWEITER{
position: absolute;
padding: 15px 20px;
bottom: 7%;
right: 10%;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
cursor: pointer;
}
.BTNWEITER:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.INFOBOX-ABSCHLUSS {
flex-direction: row;
position: absolute;
padding: 30px;
top: 13%;
left: 25%;
height:70%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility:hidden;
z-index:5;
}
.BILDINFOBOX-ABSCHLUSS{
position: absolute;
top:10%;
left: 12%;
height:70%;
width: auto;
visibility: hidden;
}
.BILDINFOBOX-ABSCHLUSS-BLAZE{
position: absolute;
top:10%;
left: 10%;
height:70%;
width: auto;
transform:rotateY(180deg);
visibility: hidden;
}
.TEXT-ABSCHLUSS{
position: absolute;
top: 7%;
left: 50%;
height: auto;
width: 48%;
font-family: "open sans";
color: #285238;
font-size: 1.6rem;
text-align: left;
}
.BTNABSCHLUSS{
position: absolute;
padding: 15px 20px;
bottom: 7%;
right: 12%;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
cursor: pointer;
}
.BTNABSCHLUSS:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.CODE-AUSGABE{
font-family: "bangers";
font-size: 3rem;
color: #285238;
text-align: center;
}
/*Kapitel 2 - Solar */
.BTNLINKS-SOLAR{
display: inline-block;
padding: 20px 30px;
font-family: 'Bangers';
font-size: 2rem;
text-decoration: none;
letter-spacing: 0.05em;
color: #e8a723;
background-color: #285238;
border: 2px;
border-color: #285238;
border-radius: 8px;
cursor: pointer;
z-index:4;
}
.BTNLINKS-SOLAR:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.HEADER-SOLAR{
position: absolute;
top: 16%;
left: 8%;
font-family: "bangers";
color: #e8a723;
font-size: 5rem;
}
.SOLARPANEL{
position:absolute;
bottom:7%;
left: 3%;
height:60%;
width:auto;
}
.INFOBLASE-SOLAR{
position: absolute;
top: 26%;
left: 36%;
height: 12%;
width: auto;
z-index:4;
cursor: pointer;
}
.INFOTEXT-SOLAR{
position: absolute;
top: 31%;
left: 43%;
font-family: "open sans";
font-size: 1.5rem;
color: #e8a723;
text-align: left;
cursor: pointer;
}
.TEXTBLOCK-SOLAR{
position: absolute;
right:5%;
top: 13%;
width:39%;
height: auto;
font-family: "open sans";
font-size: 2rem;
color: #285238;
text-align: left;
visibility: visible;
}
.ANTWORTEN-SOLAR{
position: absolute;
left: 15%;
}
.TEXT-SOLAR{
font-family: "open sans";
font-size: 2rem;
color:#285238;
text-align:left;
}
.PRUEFEN-SOLAR{
display: inline-block;
padding: 20px 30px;
font-family: 'Bangers';
font-size: 2rem;
text-decoration: none;
letter-spacing: 0.05em;
color: #e8a723;
background-color: #285238;
border: 2px;
border-color: white;
border-radius: 8px;
cursor: pointer;
}
.PRUEFEN-SOLAR:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.ABSCHLUSSTEXT-SOLAR{
position: absolute;
top: 23%;
right: 8%;
font-family: "open sans";
font-size: 2rem;
color: #285238;
text-align: left;
width: 32%;
height: auto;
visibility:hidden;
}
/*Kapitel 3 - Wasser */
.INFOBOX-ABSCHLUSS {
flex-direction: row;
position: absolute;
padding: 30px;
top: 13%;
left: 22%;
height:70%;
width: 60%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility:hidden;
z-index:5;
}
.BILDINFOBOX-ABSCHLUSS{
position: absolute;
top:10%;
left: 5%;
height:70%;
width: auto;
visibility: hidden;
}
.TEXT-ABSCHLUSS{
position: absolute;
top: 7%;
left: 50%;
height: auto;
width: 48%;
font-family: "open sans";
color: #285238;
font-size: 1.6rem;
text-align: left;
}
.BTNABSCHLUSS{
position: absolute;
padding: 15px 20px;
bottom: 7%;
right: 15%;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
cursor: pointer;
}
.BTNABSCHLUSS:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.BTNLINKS-WASSER{
display: inline-block;
padding: 20px 30px;
font-family: 'Bangers';
font-size: 2rem;
text-decoration: none;
letter-spacing: 0.05em;
color: #e8a723;
background-color: #285238;
border: 2px;
border-color: #285238;
border-radius: 8px;
cursor: pointer;
z-index:4;
}
.BTNLINKS-WASSER:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.HEADER-WASSER{
position: absolute;
top: 16%;
left: 8%;
font-family: "bangers";
color: #e8a723;
font-size: 5rem;
}
.LANDSCHAFT-WASSERKRAFTWERK{
position:absolute;
bottom:10%;
left: 3%;
height:35%;
width:auto;
}
.INFOBLASE-WASSER{
position: absolute;
top: 26%;
left: 36.5%;
height: 12%;
width: auto;
z-index:4;
cursor: pointer;
}
.INFOTEXT-WASSER{
position: absolute;
top: 31%;
left: 43%;
font-family: "open sans";
font-size: 1.5rem;
color: #e8a723;
text-align: left;
cursor: pointer;
}
.TEXTBLOCK-WASSER{
position: absolute;
right:5%;
top: 13%;
width:39%;
height: auto;
font-family: "open sans";
font-size: 2rem;
color: #285238;
text-align: left;
visibility: visible;
}
.ANTWORTEN-WASSER{
position: absolute;
left: 18%;
}
.TEXT-WASSER{
font-family: "open sans";
font-size: 2rem;
color:#285238;
text-align:left;
}
.PRUEFEN-WASSER{
display: inline-block;
padding: 20px 30px;
font-family: 'Bangers';
font-size: 2rem;
text-decoration: none;
letter-spacing: 0.05em;
color: #e8a723;
background-color: #285238;
border: 2px;
border-color: white;
border-radius: 8px;
cursor: pointer;
}
.PRUEFEN-WASSER:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.ABSCHLUSSTEXT-WASSER{
position: absolute;
top: 23%;
right: 8%;
font-family: "open sans";
font-size: 2rem;
color: #285238;
text-align: left;
width: 32%;
height: auto;
visibility:hidden;
}
/*Kapitelstarts allgemein */
.FEHLERMELDUNG{
position: absolute;
padding: 30px;
right: 20%;
top: 20%;
height:auto;
width: 30%;
border-radius: 20px 20px 0px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index: 5;
}
#ZU{
position:absolute;
top: 15px;
right: 15px;
}
.CHECKBOX{
height: 1.5rem;
width:1.5rem;
cursor: pointer;
}
/*Zertifikate*/
.ZERTIFIKAT{
position: absolute;
top:5%;
left: 19%;
height:80%;
width:auto;
}
.BTNNEUSTART{
position:absolute;
bottom: 3%;
right: 20%;
padding: 8px;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
cursor: pointer;
z-index:4;
}
.BTNNEUSTART:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
.BTNDOWNLOAD{
position:absolute;
bottom: 3%;
left: 27%;
padding: 8px;
font-family: "bangers";
font-size: 2rem;
color: #e8a723;
letter-spacing: 0.05em;
border: 2px solid #285238;
border-radius: 5px;
background-color: #285238;
cursor: pointer;
z-index:4;
}
.BTNDOWNLOAD:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
/*SEITE ZUKUNFTSENERGIE*/
/* ICONS */
.ZUKUNFTSENERGIE-icons-container {
display: flex;
justify-content: center; /* Zentrieren der Icons */
align-items: center; /* Vertikales Zentrieren */
gap: 115px; /* Regelmäßiger Abstand zwischen den Icons */
position: relative;
margin-top: 15%; /* Abstand vom oberen Rand */
}
.ZUKUNFTSENERGIE-icons-container img {
width: 160px; /* Größere Breite */
height: 160px; /* Größere Höhe */
}
/* BUTTONS */
.ZUKUNFTSENERGIE-button-container {
display: flex;
justify-content: center; /* Zentrieren der Buttons */
align-items: center;
gap: 130px; /* Regelmäßiger Abstand zwischen den Buttons */
position: relative;
margin-top: 4%; /* Abstand zu den Icons */
}
.ZUKUNFTSENERGIE-button-container a {
display: inline-block;
padding: 15px 30px; /* Größere Padding */
font-size: 18px;
text-decoration: none;
color: #e8a723;
background-color: #285238;
border-radius: 10px;
transition: background-color 0.3s ease;
font-family: 'Bangers', cursive;
text-align: center; /* Text zentrieren */
}
.ZUKUNFTSENERGIE-button-container a.hovered {
background-color: #45a049; /*HOVER-FARBE*/
}
.ZUKUNFTSENERGIE-hintergrundbild {
position: absolute;
bottom: -4%;
left: -10%;
height: 40%;
width: auto;
}
/*SEITE SOLAR RETTERWISSEN */
/* Allgemeine Styles für das Akkordeon */
details {
background: #eee;
border: 1px solid #e8a723;
border-radius: 3px;
margin-bottom: 1.5rem;
}
summary {
background: #e8a723;
color: #fff;
cursor: pointer;
padding: 1rem;
text-align: left;
font-weight: bold;
}
/* Verzögerungseffekt */
details[open] summary ~ * {
animation: sweep .7s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0; margin-left: -20px}
100% {opacity: 1; margin-left: 0px}
}
.HERO {
position: absolute;
bottom: 4%;
left: 10%;
height: 30%;
}
.SPRECHBLASE {
position: absolute;
padding-top: 5px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
bottom: 25%;
left: 22%;
height: 27%;
width: 12%;
border-radius: 20px 20px 20px 0px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
font-family: "open sans";
font-size: 1rem;
color: #285238;
text-align: left;
display: block; /* Standardmäßig sichtbar */
cursor: default;
}
.SPRECHBLASEWEITER {
position: absolute;
padding-top: 5px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
bottom: 25%;
left: 22%;
height: 18%;
width: 12%;
border-radius: 20px 20px 20px 0px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
font-family: "open sans";
font-size: 1rem;
color: #285238;
text-align: left;
display: none; /* Anfangs versteckt */
cursor: default;
}
.LOS {
position: absolute;
bottom: 5%;
right: 5%;
display: inline-block;
padding: 10px 15px;
font-family: 'Bangers';
font-size: 1.5rem;
text-decoration: none;
color: white;
background-color: #285238;
border: 2px;
border-color: white;
border-radius: 8px;
cursor: pointer;
}
.PFEIL-LI {
position: absolute;
bottom: 5%;
left: 5%;
height: 15%;
width: auto;
}
.PFEIL-RE {
position: absolute;
bottom: 5%;
right: 5%;
height: 10%;
width: auto;
}
.HEADER {
position: absolute;
top: 16%;
left: 8%;
font-family: "bangers";
color: #285238;
font-size: 5rem;
cursor: default;
}
.HEROBLAZE {
position: absolute;
bottom: 4%;
left: 10%;
height: 30%;
transform: rotateY(180deg);
}
/* BILD VON SOLARPANEL */
.SOLAR {
position: absolute;
bottom: -4%;
left: -10%;
height: 50%;
width: auto;
}
/* BILD VOM WINDRAD */
.WASSERKRAFTBILD {
position: absolute;
bottom: -4%;
left: -10%;
height: 40%;
width: auto;
}
/* BILD VOM WINDRAD */
.WINDRAD {
position: absolute;
bottom: -4%;
left: -10%;
height: 40%;
width: auto;
}
.BUTTONBILDER {
position: absolute;
top: 20%;
right: 15%;
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
}
.BUTTON {
height: 100px;
width: auto;
cursor: pointer;
transition: transform 0.2s ease;
}
.BUTTON:hover {
transform: scale(1.1);
}
.AKKORDEON {
position: absolute;
top: 26%;
right: 15%;
width: 25%;
visibility: hidden;
transform: translateY(-20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.AKKORDEON-INHALT {
padding: 0.5rem 1rem 1px 1rem;
color: black;
cursor: default;
}
.AKKORDEON-SICHTBAR {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.HERVORHEBEN {
color: #e8a723;
font-weight: bold;
cursor: pointer;
position: relative;
}
.HERVORHEBEN:hover::after {
content: attr(data-infokasten);
background-color: #285238;
color: #FFFFFF;
position: absolute;
padding: 10px;
border-radius: 10px;
font-size: 0.9rem;
font-family: 'Open Sans', sans-serif;
z-index: 1000;
white-space: normal;
width: 250px;
pointer-events: none;
left: calc(100% + 10px);
top: calc(100% + 10px);
}
/* Buttons für Retterwssen - Zurück zur Mission */
.ZURUECK-WIND, .ZURUECK-WASSER, .ZURUECK-SOLAR{
position: absolute;
bottom: 59%;
left: 8%;
display: inline-block;
padding: 15px 20px;
font-family: 'Bangers';
font-size: 2rem;
text-decoration: none;
letter-spacing: 0.05em;
color: #e8a723;
background-color: #285238;
border: 2px;
border-color: white;
border-radius: 8px;
cursor: pointer;
visibility: hidden;
z-index:3;
}
.ZURUECK-WIND:hover, .ZURUECK-WASSER:hover, .ZURUECK-SOLAR:hover{
color: #285238;
background-color: #45a049;
border: 2px solid #285238;
}
/* Impressum */
.SCARLET-IMPRESSUM{
position: fixed;
right: 5%;
bottom: 5%;
height:25%;
width: auto;
z-index: 3;
}
.KNIGHT-IMPRESSUM{
position: fixed;
right: 18%;
bottom: 5%;
height:25%;
width: auto;
z-index: 3;
}
.BLAZE-IMPRESSUM{
position: fixed;
right: 30%;
bottom: 5%;
height:25%;
width: auto;
z-index: 3;
}
.THUNDER-IMPRESSUM{
position: fixed;
left: 28%;
bottom: 5%;
height:25%;
width: auto;
z-index: 3;
}
.TITAN-IMPRESSUM{
position: fixed;
left: 16%;
bottom: 5%;
height:25%;
width: auto;
z-index: 3;
}
.SONIC-IMPRESSUM{
position: fixed;
left: 5%;
bottom: 5%;
height:25%;
width: auto;
z-index: 3;
}
.inhaltimpressum {
position: absolute;
max-width: 800px;
top:12%;
left:40%;
padding: 20px;
color: #FFC107;
}
h2{
font-family: "bangers";
color:#FFC107;
font-size:1.5rem;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
h3{
font-family: "open sans", bold;
color:#285238;
font-size:1rem;
margin-bottom: 10px;
}
a {
color: #FFC107;
text-decoration: none;
}
.QUELLENVZ{
cursor:pointer;
}
#BTNQUELLEN{
position:absolute;
top:20px;
right:20px;
z-index:5;
}
.QUELLEN{
flex-direction: row;
position: absolute;
padding: 30px;
top: 15%;
left: 25%;
height:60%;
width: 50%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:4;
overflow-y: scroll;
overflow-x: hidden;
}
.QUELLEN-TEXT{
position: absolute;
padding: 20px;
font-family: "open sans";
color:#285238;
font-size:1rem;
z-index:4;
}
.EIGENLEISTUNG{
margin-bottom: 30px;
cursor:pointer;
}
#BTNEIGENLEISTUNG{
position:absolute;
top:20px;
right:20px;
z-index:5;
}
.EIGENLEISTUNG-BOX{
flex-direction: row;
position: absolute;
padding: 30px;
top: 20%;
left: 30%;
height:30%;
width: 30%;
border-radius: 20px 20px 20px 20px;
background-color: white;
box-shadow: 5px 5px 10px 0px gray;
visibility: hidden;
z-index:4;
overflow-y: scroll;
overflow-x: hidden;
}
/*Sichtbarkeit von Elementen*/
.ZEIGEN{
visibility: visible;
}
.WEG{
visibility: hidden;
}
/* =========================================================
GLOBAL FIX (unten in styles.css einfügen)
Stabilisiert Layout auf ALLEN Unterseiten
========================================================= */
/* 1) Responsives Grundlayout statt "fest 1920px" */
html, body {
width: 100%;
overflow-x: hidden; /* horizontal nie scrollen */
/* overflow-y bleibt wie bei dir (hidden) – du kannst es bei Bedarf auf auto ändern */
}
/* Deine feste Breite ist DER Klassiker für verschobene Layouts */
.ALLES{
width: 100%;
max-width: 1920px; /* behält dein "Design für 1920" */
margin: 0 auto; /* zentriert auf größeren Screens */
}
/* Bessere Box-Sizing-Logik (verhindert "Box wird größer als gedacht") */
*, *::before, *::after{
box-sizing: border-box;
}
/* 2) Infoboxen: überall gleich stabil (Flex statt "alles absolut innen")
-> gilt für alle deine Box-Varianten */
.INFOBOX,
.INFOBOX-KLIMA,
.INFOBOX-WEITER,
.INFOBOX-ABSCHLUSS,
.QUELLEN,
.EIGENLEISTUNG-BOX,
.FEHLERMELDUNG,
.FEHLERMELDUNG-CODE,
.FEHLERMELDUNG-KARTE {
display: flex;
gap: 30px;
align-items: center;
/* wichtig: niemals starr clippen, sondern bei zu viel Inhalt scrollen */
max-height: 70vh;
overflow: auto;
}
/* 3) Textbereiche in Boxen: nicht mehr "aus Versehen absolut" */
.TEXT-KLIMA,
.TEXT-START,
.TEXT-ENDE,
.TEXT-ABSCHLUSS {
position: static !important;
width: auto !important;
height: auto !important;
max-width: 100%;
line-height: 1.35;
}
/* 4) Bilder in Infoboxen: lassen wir die Animation, aber verhindern Layout-Glitches */
.BILDINFOBOX-KNIGHT,
.BILDINFOBOX-KNIGHT-ENDE,
.BILDINFOBOX-SCARLET,
.BILDINFOBOX-BLAZE,
.BILDINFOBOX-THUNDER,
.BILDINFOBOX-TITAN,
.BILDINFOBOX-SONIC,
.BILDINFOBOX-ENDE,
.BILDINFOBOX-ENDE-BLAZE,
.BILDINFOBOX-ENDE-SONIC,
.BILDINFOBOX-ABSCHLUSS,
.BILDINFOBOX-ABSCHLUSS-BLAZE {
/* verhindert, dass das Bild "Text überlagert" weil es irgendwo absolut schwebt */
/* ABER: wenn du für bestimmte Seiten absolut brauchst, greift !important nicht */
max-height: 60vh;
height: auto;
width: auto;
}
/* 5) Button .KARTE-ANSEHEN ist bei dir mehrfach definiert -> Chaos.
Wir erzwingen einen stabilen, einheitlichen Platz "unten mittig" IN der Box. */
.INFOBOX .KARTE-ANSEHEN,
.INFOBOX-KLIMA .KARTE-ANSEHEN,
.INFOBOX-WEITER .KARTE-ANSEHEN,
.INFOBOX-ABSCHLUSS .KARTE-ANSEHEN {
position: absolute;
left: 50%;
bottom: 25px;
transform: translateX(-50%);
right: auto !important;
}
/* Optional: wenn ein Box-Button in kleinen Viewports zu breit wird */
.KARTE-ANSEHEN{
max-width: 90%;
white-space: normal;
text-align: center;
}
/* 6) Info-Boxen sollen IMMER über der Karte liegen */
.INFOBOX,
.INFOBOX-KLIMA,
.INFOBOX-WEITER,
.INFOBOX-AB
/* Mission/Quiz-Seiten: vertikales Scrollen erlauben */
main{
overflow-y: auto;
overflow-x: hidden;
}
/* Falls es trotzdem abgeschnitten wird (weil body/html overflow hidden hat): */
html, body{
overflow-y: auto;
overflow-x: hidden;
}
/* Prüfen / Weiter Buttons immer sichtbar */
.PRUEFEN-WIND,
.PRUEFEN,
.PRUEFEN-SOLAR,
.PRUEFEN-WASSER,
.BTNLINKS,
.BTNLINKS-WIND,
.BTNLINKS-SOLAR,
.BTNLINKS-WASSER{
position: fixed;
right: 5%;
bottom: 5%;
z-index: 999;
}
/* ===== FIX: Scrollen wieder erlauben (für lange Inhalte wie Quiz/Antwortlisten) ===== */
/* Statt komplettem Scroll-Lock: nur horizontal sperren, vertikal erlauben */
html, body {
height: auto;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
/* main darf nicht mehr auf 100% "eingesperrt" sein, sonst wird unten abgeschnitten */
main {
height: auto;
min-height: calc(100vh - 80px); /* Navbar-Höhe grob */
overflow: visible;
padding-top: 100px; /* Abstand unter der fixed Navbar (damit nichts dahinter klebt) */
}
/* Deine 1920px-Zwangsbreite erzeugt oft Layout-Probleme auf kleineren Screens */
.ALLES{
width: 100%;
max-width: 1920px;
margin: 0 auto;
}