/* 27.12.23:root { --blau:#224B82; --gelb:#FFDF6A; --gruen:#34b172; --hellgruen:#54D192; --rot:#e95d51; --hellrot:#F97D71;} /* Farben definieren 27.12.23 */ /* 31.12.23:root { --blau:#325B92; --gelb:#FFDF6A; --gruen:#34b122; --hellgruen:#64B152; --rot:#e95d51; --hellrot:#F97D71;} /* Farben definieren 27.12.23 */ :root { --weiss: rgb(251,251,251); /*Off var(--weiss) etwas gedecktes Weiß*/ --blau:rgb(19,92,118); --gelb:rgb(255,223,106); --gruen:rgb(52,187,34); --gruen1:rgb(52,187,34,0.25); --gruen2:rgb(52,187,34,0.5); --gruen3:rgb(52,187,34,0.75); --gruen4:rgb(52,187,34,1); --rot:rgb(233,93,81); --rot1:rgb(233,93,81,0.25); --rot2:rgb(233,93,81,0.5); --rot3:rgb(233,93,81,0.75); --rot4:rgb(233,93,81,1); } /* Farben definieren 27.12.23 */ a:link {text-decoration:none; color:black;} a:hover {} a:visited {color:red; background-color:black;} a:active {color:green; } .abschneiden {max-width:28vw; max-width:15em; var(--weiss)-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /*kürzt zu lange Fächernamen in der Punkteansicht */ .abstand08 {margin-top:0.625em;} /* Abstand zwischen den Texten auf der Startseite*/ /*.anmeldeButton {-webkit-appearance:none; font-size:1.1em; color:black; background-color:var(--weiss); border:0.2em solid var(--blau); border-radius:0.7em; margin:0.1em; padding:0.1em; padding-left:0.3em; padding-right:0.3em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);}*/ .anmelden {font-size:1.1em;margin-top:0.5em;margin-bottom:0.5em;padding-bottom:0.19em;text-align:center;background-color:var(--weiss); border-radius:0.6em;} /*Anmeldebutton im Kopf und bei Beenden*/ .anmelden_box {padding-top:4em; background-color:var(--blau); padding-bottom:0.1em; margin-bottom:-3em; border:0em;} /*Anmelden auf den anderen Seiten*/ .anmeldung {color:black; text-align:center; animation:x-klappen-anmeldung 1s linear; height:auto; max-height:30em; background-color:var(--gelb); margin-bottom:-3em;} /* Anzeige der Anmeldung mit Aufklappen */ .anmeldung_day {color:black; text-align:center; overflow:hidden; animation:klappen-anmeldung 1s linear; height:auto; max-height:30em; background-color:var(--gelb); margin-top:3em; margin-bottom:1em;} /* Anzeige der Anmeldung mit Aufklappen, wenn day gewählt wurde */ @keyframes klappen-anmeldung {0%,20% {max-height:0em; } 100% {max-height:12.5em; } } .antwortButton {color:black; border-radius:1em; text-align:center; margin-top:0.2em; margin-bottom:0.625em; margin-left:0.625em; margin-right:0.625em; padding:0.3em; font-size:1.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); border:0.2em solid var(--blau); background-color:var(--weiss);}/* neutraler Antwortbutton für eine Frage */ .antwortButton_r {color:black; border-radius:1em; text-align:center; margin-top:0.2em; margin-bottom:0.625em; margin-left:0.625em; margin-right:0.625em; padding:0.3em; font-size:1.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); border:0.2em solid var(--blau); background-color:var(--weiss);}/* neutraler Antwortbutton für eine Frage */ /*.antwortButton_r:active {background-color:var(--gruen); border:0.2em solid var(--gruen)}/* der richtige Link bei href soll grün dargestellt werden */ .antwortButton_f {color:black; border-radius:1em; text-align:center; margin-top:0.2em; margin-bottom:0.625em; margin-left:0.625em; margin-right:0.625em; padding:0.3em; font-size:1.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); border:0.2em solid var(--blau); background-color:var(--weiss);}/* neutraler Antwortbutton für eine Frage */ /*.antwortButton_f:active {background-color:var(--rot); border:0.2em solid var(--rot)}/* der falsche Link bei href soll rot dargestellt werden */ .antwortButton_insta {color:black; border-radius:1em; text-align:center; margin-top:0.1em; margin-bottom:0.5em; margin-left:0.5em; margin-right:0.5em; padding:0.2em; font-size:1.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); border:0.2em solid var(--blau); background-color:var(--weiss);}/* neutraler Antwortbutton für eine Frage Instagram */ .aufklappen {overflow:hidden; animation:aufklappen 1s linear; height:auto;} .aufklappen1500 {animation:aufklappen 1s linear; height:auto; max-height:50vh;} /*gehört zu Quizanzeige auf der Startseite*/ @keyframes aufklappen {0% {max-height:0em; } 100% {max-height:100em; }} .auswahl {-webkit-appearance:none; color:black; font-size:1.3em; margin-left:0em; border:0em; border-radius:0.5em; text-align:left; background-color:var(--weiss); display:inline; width:100%;}/* Auswahlfeld der Quiz-Modi */ .auswahl_klein {-webkit-appearance:none; color:black; font-size:0.8em; margin-left:0em; padding-right:1em; border:0em; border-radius:0.5em; text-align:left; background-color:var(--weiss); display:inline; width:100%;}/* Auswahlfeld der Quiz-Modi */ .auswahl-day {-webkit-appearance:none; font-size:1.3em; margin:0em; border:0em; text-align:left; background-color:var(--weiss); width:100%;}/* Auswahlfeld der Quiz-Modi */ .auswahltext {-webkit-appearance:none; color:black; font-size:0.75em; margin-left:0em; border:0em; border-radius:0.5em; text-align:left; width:100%; background-color:var(--weiss); display:inline; }/* 2. Zeile im Auswahlfeld der Quiz-Modi */ .auswahltext-day {-webkit-appearance:none; color:black; font-size:0.75em; margin:0em; border:0em; text-align:left; width:100%; background-color:var(--weiss);}/* 2. Zeile im Auswahlfeld der Quiz-Modi */ .auswahl_fach {border-radius:0.6em; text-align:left; margin-top:0.3em; margin-left:0.6em; margin-right:0.6em; padding-bottom:0.0em; padding-top:0.0em; padding-left:0.6em; padding-right:0.1em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); border:0.2em solid var(--blau); background-color:var(--weiss);}*/ /* .baustelle {-webkit-animation:fadebaustelle 3s linear forwards;animation:fadebaustelle 3s linear forwards;} @-webkit-keyframes fadebaustelle {0%,100% { opacity:0; } 10%,90% { opacity:1; }} @keyframes fadebaustelle {0%,100% { opacity:0; } 10%,90% { opacity:1; }} */ .baustelle {-webkit-animation:fadebaustelle 5s linear forwards;animation:fadebaustelle 5s linear forwards;} @-webkit-keyframes fadebaustelle { 100% { opacity:0; transform:scale(0);} 0%,50% { opacity:1; transform:scale(1);}} @keyframes fadebaustelle { 100% { opacity:0; transform:scale(0);} 0%,50% { opacity:1; transform:scale(1);}} .beenden {-webkit-appearance:none; border-radius:1em; border:0.2em solid var(--weiss); padding:0.19em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); text-align:center; color:var(--weiss); background-color:var(--blau); font-size:1em; width:94vw; margin-top:1.25em; max-width:29.375em; }/* Button zum Wechsel zur Auswertung*/ .bewegen1 {animation:bewegen1 4s ease 0s 1 normal both;} @keyframes bewegen1 {0% {-webkit-transform: translate(0,-2em); -moz-transform: translate(0,-2em); -o-transform: translate(0,-2em); transform: translate(0,-2em);} 100% {-webkit-transform: translate(0,0); -moz-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);}} .bisherige_fragen {border:0.2em solid var(--blau); border-radius:0.6em; margin-top:1.875em; margin-left:0.3em; margin-right:0.3em;} /* blauer Rahmen um die einzelne Frage */ .blau {color: var(--blau);} .blinken2 {animation:blinken 1s ease 0s 1 normal both; display:inline;} @keyframes blinken {0%,66% {opacity:0;} 33%,100% {opacity:1;}} .Button {-webkit-appearance:none; font-size:1.2em; color:black; background-color:var(--weiss); border:0.2em solid var(--blau); border-radius:0.7em; margin:0.1em; padding:0.1em; padding-left:0.3em; padding-right:0.3em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);} .Button_klein {-webkit-appearance:none; font-size:1.0em; color:black; background-color:var(--weiss); border:0.2em solid var(--blau); border-radius:0.7em; margin:0.1em; padding:0.1em; padding-left:0.3em; padding-right:0.3em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);} .Button1_1 {-webkit-appearance:none; font-size:1.1em; color:black; background-color:var(--weiss); border:0.1em solid var(--blau); border-radius:0.7em; margin:0.1em; padding:0.1em; padding-left:0.3em; padding-right:0.3em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);} .Button20 {-webkit-appearance:none; font-size:1.1em; color:black; background-color:var(--weiss); border:0.2em solid var(--blau); border-radius:0.7em; margin:0.1em; padding:0.1em; padding-left:0.3em; padding-right:0.3em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);} .Button43 {-webkit-appearance:none; font-size:1.2em; color:black; background-color:var(--weiss); border:0.2em solid var(--blau); border-radius:0.7em; margin-top:0.2em; margin-bottom:0.2em; margin-left:0.2em; margin-right:0.2em; padding:0.2em; padding-left:0.3em; padding-right:0.3em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); max-width:12.5em; } .Button30 {-webkit-appearance:none; font-size:1.2em; color:black; background-color:var(--weiss); border:0.2em solid var(--blau); border-radius:0.7em; margin-top:0.2em; margin-bottom:0.2em; padding:0.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); width:30vw; max-width:7.5em;} .Button50 {-webkit-appearance:none; font-size:1.2em; color:black; background-color:var(--weiss); border:0.2em solid var(--blau); border-radius:0.7em; margin-top:0.2em; margin-bottom:0.2em; padding:0.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); width:50vw; max-width:11.5em;} .Button90 {-webkit-appearance:none; font-size:1.2em; color:black; background-color:var(--weiss); border:0.2em solid var(--blau); border-radius:0.7em; margin-top:0.2em; margin-bottom:0.2em; padding:0.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); width:90vw; max-width:20em;} .ButtonFrage_gruen {-webkit-appearance:none; font-size:1.1em; font-weight:bold; color:var(--gruen); background-color:var(--weiss); border:0.2em solid var(--gruen); border-radius:0.7em; margin:0.1em; margin-top:-1em; width:6em; padding:0.1em; padding-left:0.3em; padding-right:0.3em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);} .ButtonFrage_rot {-webkit-appearance:none; font-size:1.1em; font-weight:bold; color:var(--rot); background-color:var(--weiss); border:0.2em solid var(--rot); border-radius:0.7em; margin:0.1em; margin-top:-1em; width:8em; padding:0.1em; padding-left:0.3em; padding-right:0.3em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);} .ButtonSG {-webkit-appearance:none; font-size:1.1em; color:black; background-color:var(--weiss); border:0.2em solid var(--blau); border-radius:0.7em; margin:0.1em; padding:0.1em; padding-left:0.3em; padding-right:0.3em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);} .ButtonSortierung {-webkit-appearance:none; font-size:1.0em; color:black; background-color:var(--weiss); border:0.1em solid var(--blau); display:inline; width:5em;} .ButtonTeach {-webkit-appearance:none; font-size:1.0em; color:var(--blau); background-color:var(--weiss); border:0.1em solid var(--blau); border-radius:0.7em; margin-bottom: 0.125em; margin-left:0.06em; margin-right:0.06em; padding:0.125em; padding-left:0.25em; padding-right:0.25em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); display:inline;} .Buttonklein {-webkit-appearance:none; font-size:1.0em; color:var(--blau); text-decoration: underline; background-color:var(--gelb); border:0em; margin: 0em; padding:0em; display:inline;} /* im Fließtext von teach und user=Gast */ .check {font-size:0.8em; color:var(--rot); border:0.1em solid var(--rot); border-radius:0.7em; padding-left:1em; margin:1em:} .container {width:100vw; max-width:26em; background-color:var(--gelb); text-aling:center;} .day_punktestand {margin-top:0.5em; text-align:center; font-size: 0.9em;} .doppelantwort {color:var(--rot); padding:0.625em;} .dreh1 {margin-top:0.1em; margin-left:-0.125em; margin-right:0.125em; float:left; /*animation:d2 0.3s linear;*/ -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg);}/*dreht den Pfeil*/ @keyframes d1 {0% {transform:rotate(0deg);} 100% {transform:rotate(-180deg);} } .dreh2 {margin-top:-1.8em; margin-left:-0.125em; margin-right:0.125em; float:left; z-index:20; position:relative; background-color:var(--weiss); animation:d1 0.3s linear; -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); } /*dreht den Pfeil*/ @keyframes d2 {0% {transform:rotate(90deg);} 100% {transform:rotate(0deg);} } .einstell {height:5em;} .einstellungen {display:block; position:relative; background-color:var(--blau); max-width:30em; color:var(--weiss); border:0em; z-index:10; text-align:left; padding-left:1em; margin-bottom:-3em;} .einstellungenTitel {background-color:var(--blau); color:var(--weiss); font-size:1.2em; font-weight:bold;} /*Überschriftszeile der Einstellungsseite (input) */ .einstellungsButton {font-size:1.1em; border:0.06em; border-radius:0.3em; color:black; background-color:var(--weiss); box-shadow: 0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); margin-top:0.25em; margin-bottom:0.25em; margin-left:0.125em; padding:0.3em;} .einstellungshinweis {font-size:0.7em; padding-left:0.125em; padding-right:0.125em;} /* kleiner Hinweis, dass Löschen rückgängig gemacht werden kann */ .einstellungsinput30 {font-size:1.1em; border:0.06em; border-radius:0.3em; color:black; background-color:var(--weiss); box-shadow: 0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);width:30vw; max-width:9.375em; margin-top:0.25em; padding-left:0.3em;} .einstellungsinput15 {font-size:1.1em; border:0.06em; border-radius:0.3em; color:black; background-color:var(--gelb); box-shadow: 0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);width:3em; margin-top:0.25em; padding-left:0.3em; padding-right:0.3em;} .einstellungsinput11 {font-size:1.1em; border:0.06em; border-radius:0.3em; color:black; background-color:var(--gelb); box-shadow: 0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);width:11vw; max-width:3.438em; margin-top:0.25em; padding-left:0.3em;} /* Zahleneingabe für die Anzahl der Fragen in study */ /*.einstell_name {font-size:1.1em; background-color:var(--weiss); border-radius:0.3em; border:0.06em; padding-left:0.3em;margin-top:0.25em; margin-left:0.625em; float:left;} /* input für Anmeldename und password im Einstellungmenue */ .einstell_titel {color: var(--blau); background-color: var(--weiss); font-size: 1.1em; font-weight:bold; margin-top:-1em; margin-left:0.3em; padding-left:0.5em; padding-right:0.5em; border:solid 0.1em var(--blau); border-radius:0.375em; display:table;} .eng {letter-spacing: -0.1em;} /*.erklaerung {color:var(--blau); margin-right:0.625em; margin-left:0.625em; font-size:0.8em; text-align:center; overflow:hidden; animation:klappen-erklaerung 2s linear; height:auto; max-height:12.5em; padding-top:1em; }/* Anzeige des Erklärungsfeldes für eine Frage */ .erklaerung {color:black; margin-right:0.625em; margin-left:0.625em; font-size:0.7em; text-align:center; overflow:auto; animation:klappen-erklaerung 2s linear; height:auto; padding-top:1em; display:block; position:relative;}/* Anzeige des Erklärungsfeldes für eine Frage */ .erklaerung_insta {color:black; margin-right:0.625em; margin-left:0.625em; font-size:0.7em; text-align:center; overflow:auto; animation:klappen-erklaerung_insta 3s linear; height:auto; padding-top:0.5em; display:block; position:relative;}/* Anzeige des Erklärungsfeldes für eine Frage */ @keyframes klappen-erklaerung {0%,20% {max-height:0em; } 100% {max-height:18.75em; } } @keyframes klappen-erklaerung_insta {0% {max-height:0em;} 20% {max-height:0em;} 35% {max-height:18.75em;} 100% {max-height:18.75em;} } .erklaerung_ohne_aufklappen {color:black; margin-right:0.625em; margin-left:0.625em; font-size:0.7em; text-align:center; padding-top:1em; }/* Anzeige des Erklärungsfeldes für eine Frage ohne Aufklappen, z.B. in den bisherigen Fragen .erklaerung_ohne_aufklappen {color:black; margin-right:0.625em; margin-left:0.625em; font-size:0.7em; text-align:center; overflow:hidden; height:auto; max-height:12.5em; padding-top:1em; }*/ .erscheinen0 {animation:erscheinen 0s ease 0s 1 normal both;} .erscheinen3 {animation:erscheinen 0.5s ease 3s 1 normal both;} /* für 20s Bedenkzeit */ .erscheinen15 {animation:erscheinen1 1s ease 18s 1 normal both;} .erscheinen16 {margin-top:-1.1em; animation:erscheinen2 1s ease 19s 1 normal both;} .erscheinen17 {margin-top:-1.1em; animation:erscheinen2 1s ease 20s 1 normal both;} .erscheinen18 {margin-top:-1.1em; animation:erscheinen2 1s ease 21s 1 normal both;} .erscheinen19 {margin-top:-1.1em; animation:erscheinen2 1s ease 22s 1 normal both;} .erscheinen21 {margin-top:-1.1em; animation:erscheinen3 4s ease 24s 1 normal both;} /* Zeit abgelaufen */ /* für 40s Bedenkzeit */ .erscheinen35 {animation:erscheinen1 1s ease 38s 1 normal both;} .erscheinen36 {margin-top:-1.1em; animation:erscheinen2 1s ease 39s 1 normal both;} .erscheinen37 {margin-top:-1.1em; animation:erscheinen2 1s ease 40s 1 normal both;} .erscheinen38 {margin-top:-1.1em; animation:erscheinen2 1s ease 41s 1 normal both;} .erscheinen39 {margin-top:-1.1em; animation:erscheinen2 1s ease 42s 1 normal both;} .erscheinen41 {margin-top:-1.1em; animation:erscheinen3 4s ease 44s 1 normal both;} /* Zeit abgelaufen */ @keyframes erscheinen {0% {opacity:0;} 100% {opacity:1;}} @keyframes erscheinen1 {0%,100% {opacity:0;} 10%,90% {opacity:1;}} @keyframes erscheinen2 {0%,100% {opacity:0;} 10%,90% {opacity:1;}} @keyframes erscheinen3 { 0%,25% {opacity:0; scale:0; } 100% {opacity:1; scale:1;} 25% {-webkit-transform: translate(0,-10em); -moz-transform: translate(0,-10em); -o-transform: translate(0,-10em); transform: translate(0,-10em);} 0%, 100% {-webkit-transform: translate(0,0); -moz-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} } .fachname {font-size:1.1em; text-overflow: ellipsis; overflow: hidden; var(--weiss)-space: nowrap; max-height:1.3em; } /*wird ggf. horizontal abgeschnitten*/ .fachname_lang {-webkit-appearance:none; color:black; font-size:1.1em; background-color:transparent; border:0em; z-index:5; position:relative; width:100%; text-align:left;} .faecherWahl {border-radius:1em; min-height:1em; padding:0.3em; padding-left:0.5em; padding-right:0.5em; margin:0.3em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); border:0.19em solid var(--blau); text-align:center; font-size:1.2em; color:black; background-color:var(--weiss);} /* Farben für den Schwierigkeitsgrad */ .farbe0 {background-color:var(--gruen);} .farbe1 {background-color:var(--gruen4);} .farbe2 {background-color:var(--gruen3);} .farbe3 {background-color:var(--gruen2);} .farbe4 {background-color:var(--gruen1);} .farbe5, .farbe11, .farbe12, .farbe13, .farbe14, .farbe15, .farbe16, .farbe17, .farbe18, .farbe19, .farbe20, .farbe21 {background-color:var(--weiss);} .farbe6 {background-color:var(--rot1);} .farbe7 {background-color:var(--rot2);} .farbe8 {background-color:var(--rot3);} .farbe9 {background-color:var(--rot4);} .farbe10 {background-color:var(--rot);} .fett {font-weight:bold;} .fix {display:flex; top:10em; position:fixed !important; width:100%; border:1 solid black;} .fortsetzen {font-size:1.1em; border:0.06em; border-radius:0.3em; color:black; background-color:var(--weiss); box-shadow: 0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2);} .frage {border-radius:1em; min-height:5em; text-align:center; margin:0.625em; margin-bottom:1.25em; padding:0.3em; color:black; font-size:1.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); background-color:var(--weiss); } /* Anzeige des Fragenfeldes */ .frage_insta {border-radius:1em; text-align:center; margin:0.625em; margin-bottom:0.8em; padding:0.3em; color:black; font-size:1.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); background-color:var(--weiss); } /* Anzeige des Fragenfeldes */ .Frage_neu {border-radius:1em; min-height:5em; text-align:center; margin:0.625em; margin-left:1em; margin-bottom:1.25em; padding:0.3em; color:black; font-size:1.1em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); background-color:var(--weiss); } /* Anzeige des Fragenfeldes */ .Frageninput {font-size:0.9em; font-weight:bold; color:var(--gruen); background-color:var(--weiss); border:0.2em solid var(--gruen); border-radius:0.7em; margin:0.1em; margin-top:1em; width:6em; padding:0.1em; padding-left:0.3em; padding-right:0.3em;} /*.fuss {display:flex; justify-content:center; width:100vw; max-width:30em; padding-top:0.3em; padding-bottom:0.1em; box-shadow:0em 0em 0.25em 0em grey; bottom:0em; position:fixed !important; position:absolute; background-color:var(--gelb); color:var(--blau); z-index:30;} Stand 9.2.24 */ .fuss {display:flex; justify-content:center; width:100vw; max-width:26em; padding-top:0.3em; padding-bottom:0.1em; border-top:2px solid var(--blau); bottom:0em; position:fixed !important; position:absolute; background-color:var(--gelb); color:var(--blau); z-index:30;} .fuss2 {/*display:flex; justify-content:center;*/ width:100vw; max-width:26em; padding-top:0.3em; padding-bottom:0.1em; border-top:2px solid var(--blau); bottom:0em; position:fixed !important; position:absolute; background-color:var(--gelb); color:var(--blau); z-index:30;} .fuss_streak {width:100vw; max-width:30em; padding-top:0.3em; padding-bottom:0.1em; bottom:0em; background-color:var(--gelb); color:var(--blau); z-index:30;}/*.fuss_streak {width:100vw; max-width:30em; padding-top:0.3em; padding-bottom:0.1em; box-shadow:0em 0em 0.25em 0em grey; bottom:0em; background-color:var(--gelb); color:var(--blau); z-index:30;}*/ .gelb {color:var(--gelb);} .gross {font-size:1.1em;} .gruen {color:var(--gruen);} html, body {height:100%; margin:0em; padding:0em; font-family:arial; font-size:1em; background-color:var(--weiss); text-decoration:none; overflow:hidden; scrollbar-width:none;} /*body::-webkit-scrollbar {display:none;}*/ hr {color:grey;} h1 {font-size:1.2em; font-weight:bold;} /* für Überschrift etwas dicker */ h2 {font-size:0.9em; font-weight:normal;} /* etwas dünner */ .hintergrund {background-color:var(--gelb);z-index:5; position: relative;} .hinweistext {font-size:0.9em; font-weight:normal; color:black; margin-right:0.625em;} /*Text zur Auswahl der Fächer*/ .hr_weiss {border-top: 0.06em dotted var(--weiss); margin-top:2em; margin-bottom:1em;} /* dünne gepunktete Linie oben Anmeldung */ .impressum {width:100vw; max-width:26em; padding-top:0.1em; padding-bottom:0.1em; border-top:2px solid var(--blau); display:block; bottom:0em; position:fixed !important; position:absolute; background-color:var(--gelb); color:var(--blau); z-index:30;} /*.impressum {font-size:0.8em; width:100vw; max-width:37.5em; padding-top:0.1em; padding-bottom:0.1em; box-shadow:0em 0em 0.25em 0em grey; display:block; bottom:0em; position:fixed !important; position:absolute; background-color:var(--gelb); color:var(--blau); z-index:30;} Stand 9.2.24 */ .impressumFuss {width:100vw; max-width:26em; padding-top:0.3em; padding-bottom:0.1em; border-top:2px solid var(--blau); bottom:0em; position:fixed !important; position:absolute; background-color:var(--gelb); color:var(--blau); z-index:30;}/*.impressumFuss {width:100vw; max-width:30em; padding-top:0.3em; padding-bottom:0.1em; box-shadow:0em 0em 0.25em 0em grey; bottom:0em; position:fixed !important; position:absolute; background-color:var(--gelb); color:var(--blau); z-index:30;} Stand 9.2.24 */ .impressum-text {font-size:0.9em; max-height:30vh; padding-top:0.1em; padding-bottom:0.1em; padding-left:0.3em; padding-right:0.3em;box-shadow:0em 0em 0.25em 0em grey; display:block; background-color:var(--gelb); color:var(--blau);text-align:left;} .index-text {font-size:0.9em; text-align:left; margin-left:1em; margin-right:1em;} .inline {display: inline;} /* Zeilenumbruch vermeiden bei input */ /* input {border:0.125em solid var(--blau); background-color: var(--weiss); border-radius:0.15em;} input:invalid {border:0.125em solid red; background-color:lightred;} input:invalid:focus {background-color:lightred;} input:required:focus {background-color:lightyellow;} */ .input_anmelden {font-size:1.4em; border:0.125em solid var(--gruen); border-radius:0.3em; width: 15em;} /* für anmeldename und passwort */ .input_anmelden:focus {font-size:1.4em; border:0.125em solid var(--weiss); border-radius:0.3em; width: 15em;} /* für anmeldename und passwort */ .input_anmelden:required:focus {font-size:1.4em; border:0.125em solid var(--weiss); border-radius:0.3em; width: 15em; background-color:lightyellow;} /* für anmeldename und passwort */ .input_anmelden:invalid {font-size:1.4em; border:0.125em solid var(--rot) ; border-radius:0.3em; width: 15em;} /* für Anmeldename und passwort */ .input_historie {border:0.15em solid var(--blau); color:black; background-color: var(--weiss); border-radius:0.3em;} .klein {font-size:0.9em;} .kopf {display:flex; justify-content:center; top:0em; position:fixed !important; height:3em; width:100vw; max-width:26em; background-color:var(--blau); z-index:5;} /* in kopf(include) */ .kopf_einstellungen {color:var(--weiss); background-color: var(--blau); border:0em; font-size:0.6em; line-height:0.44em;} /*Formatierung des Wortes 'Einstellungen' im Kopf */ .kopf_name {color:var(--gelb); background-color: var(--blau); border:0em; margin-top: 0.5em; font-size:1.1em; display:inline; overflow-x:hidden;} /*Formatierung der Anmeldename-Anzeige im Kopf mit maximaler Breite von 30vw */ li {margin-left:-2.5em;} /* in den Hinweisen auf der Startseite */ .linke_spalte {float:left;background-color:var(--gelb);} .links {float:left; width:90%;} .loesung {color:black; border-radius:1em; text-align:center; margin-top:0.2em; margin-bottom:0.625em; margin-left:0.625em; margin-right:0.625em; padding:0.3em; font-size:1.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); }/* Anzeige des Lösungsfeldes */ .loesung_insta {color:black; border-radius:1em; text-align:center; margin-top:0.1em; margin-bottom:0.3em; margin-left:0.625em; margin-right:0.625em; padding:0.1em; font-size:1.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); }/* Anzeige des Lösungsfeldes (instagram) */ .loesung_falsch {background-color:var(--rot);border:0.2em solid var(-rot)} /* Anzeige des falschen Lösungsfeldes */ .loesung_neutral {background-color:var(--weiss);border:0.2em solid var(--weiss)} /* Anzeige des normalen Lösungsfeldes */ .loesung_richtig {background-color:var(--gruen);border:0.2em solid var(--gruen)} /* Anzeige des richtigen Lösungsfeldes */ .loesung_richtig_falsch {background-color:var(--weiss);border:0.2em solid var(--gruen)} /* Anzeige des richtigen Lösungsfeldes, wenn eine falsche Antwort gegeben wurde */ .margin-1 {margin-top:-1.5em; margin-bottom:-0.4em; margin-left:1em; margin-right: 1em;} /*gehört zu Anmelden aufklappen */ .margin1 {margin-top:1em;} .margin2 {margin-top:2em;} .margin-2 {margin-top:-2em;} .margin3 {margin-top:3em;} /*10.02.24*/.margin-3 {margin-top:-3em;} .margin-3_5 {margin-top:-3.5em;} .margin-4 {margin-top:-4em;} .margin-quizspiel {margin-top:-1.5em; margin-bottom:-0.4em;} /*gehört zu den Anzeigen der bisherigen Quizspiele auf der index-Seite */ .naechsteFrage {-webkit-appearance:none; border-radius:1em; border:0.2em solid var(--weiss); padding:0.5em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); text-align:center; font-size:1.2em; color:var(--weiss); background-color:var(--blau); width:94vw; margin-left:0.625em; margin-right:0.625em; max-width:29.375em; }/* Button zum Wechsel zur nächsten Frage*/ .neue_spalte {float: left; padding: 10px;} /*width und height definieren*/ .neue_zeile {content: ""; display: table; clear: both;} /* Clear floats after the columns */ .notiz {text-align:left; font-size:0.8em;} .overline {text-decoration:overline; font-size:0.97em;} ::placeholder {color:silver; font-size:1em; opacity:1;} .prozent {color:var(--gruen); background-color:var(--weiss); margin-top:-1.6em; margin-right:1.2em; margin-left:auto; width:3em; font-size:0.8em; border-radius:0.6em; border: 2px solid var(--gruen); padding:0.1em; } /* Prozent der richtigen Antworten */ .prozent-richtig {color:var(--weiss); text-align:center; margin-top:-1.25em; font-size:0.9em; } .punkt {animation:blinken 1s ease 0s 1 normal both; display:inline;} @keyframes blinken {0%,66% {opacity:0;} 33%,100% {opacity:1;}} .questbild {border:1px solid grey; box-shadow:2px 2px 2px grey;} /*.quizButton {min-height:3.125em; border-radius:1em; margin-top:0em; margin-bottom:0.8em; margin-left:0.8em; margin-right:0.8em; padding:0.1em; padding-left:0.5em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); background-color:var(--weiss);}/* Button zur Auswahl der Quizze auf der Startseite*/ /*10.02.24*/.quizButton {min-height:3.2em; border-radius:1em; margin-top:0em; margin-bottom:0.8em; margin-left:0.8em; margin-right:0.8em; padding:0.1em; padding-left:0.5em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); background-color:var(--weiss);}/* Button zur Auswahl der Quizze auf der Startseite*/ .quizButton_hoch {min-height:3.75em; border-radius:1em; margin-top:0em; margin-bottom:0.8em; margin-left:0.3em; margin-right:0.3em; padding:0.1em; padding-left:0.5em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); background-color:var(--weiss);}/* Button zur Auswahl der Quizze auf der Startseite*/ .quizButton_neu {width:95vw; max-width:25.3em;border-radius:1em; margin-top:0.8em; margin-bottom:0.8em; margin-left:0.3em; margin-right:0.3em; padding:0.1em; padding-left:0.8em; padding-right:0.3em; text-align:left; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); background-color:var(--weiss);}/* Button zur Auswahl der TeamQuizze auf der Startseite*/ .quizButton_schmal {min-height:3.125em; border-radius:1em; margin-top:0em; margin-bottom:0.8em; margin-left:0.3em; margin-right:0.3em; padding:0.1em; padding-left:0.5em; padding-right:0.3em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); background-color:var(--weiss);}/* Button zur Auswahl der TeamQuizze auf der Startseite*/ .quizinfo {text-align:left; font-size:0.8em; display:inline-block;} /* Infotext und gespielte Quizze auf Startseite */ .quizit-info {font-size:0.8em; text-align:left; margin:1em;} /*ergänzender Text auf der Startseite*/ .quiz_anmelden {color:var(--weiss); background-color: var(--blau); border:0em; font-size:1.1em; padding-top:0.3em;} .rahmen {border: solid 0.1em; padding:0.2em; color:var(--blau); border-radius:0.7em; margin-right:0.3em; margin-left:0.3em;} .rahmen_breit {border: solid 0.1em; padding:0.2em; color:var(--blau); border-radius:0.7em; margin-right:-0.3em; margin-left:-0.3em;} .rahmen_gruen {border: solid 0.1em; padding:0.2em; color:var(--gruen); border-radius:0.7em; margin-top:2em; margin-right:0.3em; margin-left:0.3em;} .rahmen_rot {border: solid 0.1em; padding:0.2em; color:var(--rot); border-radius:0.7em; margin-top:2em; margin-right:0.3em; margin-left:0.3em;} /*.rahmen_innen {border: solid 0.1em; padding:0.2em; color:var(--blau); border-radius:0.7em; margin-right:-2em; margin-left:-2em; margin-top:-2.1em; background-color:var(--gelb);}*/ .rahmenQuiz {border: solid 0.1em; padding:0.2em; color:var(--blau); border-radius:0.7em; margin-top:1em; margin-right:0.3em; margin-left:0.3em;} .rahmen_titel {margin-top:-0.9em; margin-bottom:0.4em; background-color: var(--gelb); border: solid 0.1em var(--blau); border-radius:0.7em;} .rahmen_anmelden_day{border: solid 0.06em; padding:0.2em; color:var(--blau); border-radius:0.7em;margin-top:3.3em; margin-bottom:0.5em;margin-left:0.2em;margin-right:0.5em;} .rand {margin-left:0.5em; margin-right:0.5em;} .rechte_spalte {float:right; color:var(--weiss); background-color:grey;} .rechts {float:right; padding-right:0.125em; text-align:right; } /* für Info-Symbol*/ .rot {color:var(--rot);} .sehrgross {font-size:1.2em;} .sehrklein {font-size:0.8em;} .schwarz {color:black;} .scroll-auto {height:auto; max-width:30em; display:block; position:relative; overflow:auto;} .scroll-30 {height:30%; max-height:30vh; max-width:30em; display:block; position:relative; overflow:auto; box-shadow:0.125em 0.25em 0.25em -0.25em grey;} /*für bisherige Quizze in study */ .scroll-70 {margin-top:0.5em; margin-left:3%; height:70vh; max-height:70vh; width:94vw; max-width:27.188em; display:block; position:relative; overflow:auto;} /*Fächerauswahl, wenn es bisherige Quizze gibt*/ .scroll-50 {margin-right:0.3em; padding-top:0.5em; height:50%; max-height: 50vh; width:100%; max-width:30em; display:block; position:relative; overflow:auto;} .scroll-100 {height:100%; max-height:100vh; width:100vw; max-width:26em; display:block; position:relative; overflow:auto;} /* für die gesamte Seite außer Kopf */ .scroll-100-breit {height:100%; max-height:100vh; width:100vw; display:block; position:relative; overflow:auto;} /* für die gesamte Seite außer Kopf */ .scroll-impressum {max-height:30vh; display:block; position:relative; overflow:auto; box-shadow:0.125em 0.25em 0.25em -0.25em grey;} /*für die Anzeige des Impressums*/ /*10.02.24*/.scroll-index {height:8.5em; overflow:auto; border-bottom:2px solid var(--blau);} .scroll-index2 {height:4em; width:100%; max-width:30em; display:block; position:relative; overflow:auto;} /* für zweizeilige Begrüßung */ .scroll-index3 { width:100%; max-width:30em; display:block; position:relative; overflow:auto;} .scroll-quiz {padding:0.125em; margin-bottom:0.5em; max-height:20vh; width:84vw; max-width:26.5em; display:block; position:relative; overflow:auto; border:0.1em solid gray; text-align:left;} /*für bisherige Quizze in study */ .scroll-quizinfo {margin-right:0.3em; padding-top:1.5em; height:50%; width:100%; max-width:30em; display:block; position:relative; overflow:auto;} .scroll-teachquizinfo {margin-right:0.3em; padding-top:0.5em; width:100%; max-width:30em; display:block; position:relative; overflow:auto;} select {font-family:arial; font-size:1.1em; background-color:var(--weiss); border:0.1em black solid; margin:0.2em;} /* Slider *********************/ /*.slidecontainer {width: 50%; display:inline-block; height:10.44em; background-color:var(--blau); border-radius:0.6em;}*/ /*.slider {-webkit-appearance: none; width: 10em; height: 0.8em; background-image:linear-gradient(to right, #5fff5f 0%, var(--weiss) 50%, #ff5f5f 100%); outline: none;}*/ /*.slider1 {-webkit-appearance: none; appearance: none; width: 48%; height: 0.625em; background: transparent; outline: none; opacity: 1;} /*.slider2 {-webkit-appearance: none; appearance: none; width: 48%; height: 0.625em; background: transparent; outline: none; opacity: 1; margin-left:-0.25em;} /* Ende: Range Slider ***************/ /* shrinking Animationsbalken für den ablaufende Zeit 20s bzw. 40s*/ .shrinking20 {border:0.1em var(--weiss) solid; animation-delay:3s; border-radius:0.5em; width:100%; height:1em; position:absolute; bottom:-0.1em; -webkit-animation-name:fillBar; animation-name:fillBar; -webkit-animation-duration:20s; animation-duration:20s; -webkit-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-direction:reverse; animation-direction:reverse; background: var(--rot); } /* roter Zeitbalken (Vordergrund) */ .shrinking40 {border:0.1em var(--weiss) solid; animation-delay:3s; border-radius:0.5em; width:100%; height:1em; position:absolute; bottom:-0.1em; -webkit-animation-name:fillBar; animation-name:fillBar; -webkit-animation-duration:40s; animation-duration:40s; -webkit-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-direction:reverse; animation-direction:reverse; background: var(--rot); } /* roter Zeitbalken (Vordergrund) */ @-webkit-keyframes fillBar { 0% {width:100%;} 100% {width:0%;} } @keyframes fillBar { 0% {width:100%;} 100% {width:0%;} } /* Ende: shrinking */ sup {font-size:0.7em;} .switch {} /* Bruchdarstellung a / b */ span.frac {display: inline-block; text-align: center; vertical-align:-0.3em;} /* font-weight:500; */ span.frac > sup {display:block; border-bottom: 1px solid; font: inherit; font-size:0.7em;} span.frac > span {display:none;} span.frac > sub {display:block; font: inherit; font-size:0.7em;} /* aus Abflug Flughafen Hamburg */ .aero-switch {/*display:flex; flex-wrap:wrap; position:relative;*/} .aero-switch__input {height:0px; width:0px; opacity:0; position:absolute; z-index:-1;} .aero-switch__slider::after { border: 8px solid transparent; border-radius: 9999px; bottom: -8px; content: ""; left: -8px; position: absolute; right: -8px; top: -8px; transition: border-color .4s;} .aero-switch__input:checked + .aero-switch__slider::before { transform: translateY(-50%) translateX(24px);} .aero-switch__slider::before { background-color: #fff; border-radius: 9999px; content: ""; height: 22px; left: 1px; position: absolute; top: 50%; transform: translateY(-50%); transition: .4s; width: 22px;} .aero-switch__input:checked + .aero-switch__slider { background-color: #00a843;} .aero-switch__slider {background-color: var(--rot); border-radius: 9999px; cursor: pointer; display: inline-block; flex-grow: 0; height: 24px; position: relative; transition: .4s; width: 48px;} .timerwrapper {height:1em; border:0.1em solid var(--weiss); width:95%; background:var(--gruen); position:relative; margin:auto; border-radius:0.5em; margin-bottom:0.3em;} /* Hintergrund vom Zeitbalken */ .tablefrage {table-layout:auto; width:100%;} .tdfrage {color:black;} .teachauswahl {font-size:1em; margin-top:-1em; background-color:var(--gelb); width:19em; margin-bottom:0.625em;} .teachcheck {font-size:1em; border-radius:0em;} .teachinput {font-size:1.2em; border-radius:2vh; padding-left:0.625em; margin:0.625em; width:90%;} .teachnotiz {font-size:1em; color:black; width:90%; margin:0.625em;} .teachrahmen {border: solid 0.125em; padding:0.19em; padding-bottom:0.5em; color:var(--blau); border-radius:0.7em; margin-top:1em; margin-right:0.625em; margin-left:0.625em;} .test {color:var(--weiss); font-size:0.9em; background-color:grey;} /*textarea {width:95%; max-width:42.5em; margin-bottom:0em; border-radius:1em; font-family:arial; font-size:0.8em; border:0.19em solid var(--blau); padding:0.5em; color:grey;}*/ /* .Antwort_gruen {margin-top:.5em; margin-left:0.2em; margin-right:0.2em; color:black; text-align:center; font-size:1.1em; border:solid 0.2em var(--gruen);} .Antwort_rot {margin-top:.5em; margin-left:0.2em; margin-right:0.2em; color:black; text-align:center; font-size:1.1em; border:solid 0.2em var(--rot);} */ .textarea_antwort_gruen {width:92%; height:1.5em; max-width:40em; margin-bottom:0.5em; border-radius:1em; font-family:arial; font-size:1.1em; text-align:center; border:0.2em solid var(--gruen); padding:0.5em;}/* Texteingabe für richtige Eigenantwort */ .textarea_antwort_rot {width:92%; height:1.5em; max-width:40em; margin-bottom:0.5em; border-radius:1em; font-family:arial; font-size:1.1em; text-align:center; border:0.2em solid var(--rot); padding:0.5em;}/* Texteingabe für falsche Eigenantwort */ .textarea_frage {width:92%; height:4em; max-width:40em; margin-bottom:0.5em; margin-top:-1em; border-radius:1em; font-family:arial; font-size:1.1em; text-align:center; border:0.2em solid var(--blau); padding:0.5em;}/* Texteingabe für Eigenfrage */ .textarea_frage::placeholder{color:grey;} .textarea_feedback {width:95%; height:5em; max-width:42.5em; margin-bottom:0em; border-radius:1em; font-family:arial; font-size:0.9em; border:0.2em solid var(--blau); padding:0.5em; color:grey;}/* Texteingabe für Feedback */ ./*textarea_notiz {width:95%; height:5em; max-width:42.5em; margin-bottom:1em; border-radius:1em; font-family:arial; font-size:1em; text-align:center; border:0.1em solid var(--blau); padding:0.5em; color:black;}/* Texteingabe für Titel des Teamquizzes */ .textarea_zwischen {width:95%; margin-top:0.625em; border-radius:1em; font-family:arial; height:5em; font-size:0.8em; border:0.1 solid var(--blau); padding:0.5em; color:grey;}/* Texteingabe für Zwischenablage */ .textlinks {text-align:left;} /*.text_titel {width:80%; height:1.5em; max-width:42.5em; margin-bottom:1em; border-radius:1em; font-family:arial; font-size:1.1em; text-align:center; border:0.1em solid var(--blau); padding:0.5em; color:black;}/* Texteingabe für Titel des Teamquizzes */ .trfrage {font-family:arial; height:5em; vertical-align:middle; text-align:center;} .trfrage_insta {font-family:arial; height:2em; vertical-align:middle; text-align:center;} .trthemen {height:1.8em;} .ueberschrift {font-size:1.1em; font-weight:bold; text-align:center; margin-top:-1.5em; } .vertikal {padding-top:0.8em; padding-right:0.1em;} .vertikal_schmal {padding-right:0.1em;padding-top:0.2em;} .vertikal_verlauf {margin-top:-0.188em;padding-top:0.7em; padding-right:0.1em; font-size:1.2em;} .von_bisherigen_fragen {font-size:0.9em; margin-top:-1.3em; margin-left:15%; margin-right:15%; border-radius:0.6em; padding:0.125em; background-color:var(--blau); color:var(--weiss); } /* Überschrift zu einzelnen Fragen im Bereich bisherige Fragen */ .verzoegerung {-webkit-animation:warte 2s linear forwards; animation:warte 2s linear forwards;} @-webkit-keyframes warte {0%,33% { opacity:0; } 100% { opacity:1; }} @keyframes warte {0%,33% { opacity:0; } 100% { opacity:1; }} .warten_gelb {width:100%; height:5em; margin-top:-4.85em; background-color:var(--gelb); position:relative; z-index:100;} .warten_pic {height:2.5em; border-radius:2em; opacity:0.8; display:flex; justify-content:center; margin-top:-4.5em; position:relative; z-index:200;} .weiss {color:var(--weiss);} .width20 {width:20vw; height:2.8em; align-items:center; display:grid; justify-content:center;} /* Kopf links und rechts instagram*/ .width30 {width:30vw; height:2.8em; align-items:center; display:grid; justify-content:center;} /* Kopf links und rechts */ .width40 {width:39vw; height:2.8em; align-items:center; display:flex; justify-content:center;} /* Kopf Mitte */ .width60 {width:59vw; height:2.8em; align-items:center; display:flex; justify-content:center;} /* Kopf Mitte instagram*/ /*.zahl {font-size:2em; padding-left:0.5em; padding-right:0.5em; padding-top:0.15em; padding-bottom:0.15em; border:0.15em solid var(--weiss); border-radius:1.5em; top:10em; position:fixed; color:var(--weiss); z-index:30;} /*.zahl {border-radius:1em; min-height:5em; text-align:center; margin:0.625em; margin-bottom:1.25em; padding:0.3em; color:black; font-size:1.2em; box-shadow:0em 0.06em 0.25em 0.06em rgba(60,60,60,0.2); background-color:var(--weiss); } /* Anzeige des Fragenfeldes */ /*.zahl {display:flex; margin-left:auto; margin-right:auto; font-size:2em; padding-left:0.5em; padding-right:0.5em; padding-top:0.15em; padding-bottom:0.15em; border:0.15em solid var(--weiss); border-radius:1.5em; top:10em; position:fixed; color:var(--weiss); z-index:30;} /*.zahl {display:flex; justify-content:center; font-size:2em; padding-left:0.5em; padding-right:0.5em; padding-top:0.15em; padding-bottom:0.15em; border:0.15em solid var(--weiss); border-radius:1.5em; top:10em; position:fixed !important; color:var(--weiss); z-index:30;} /*.zahl {display:flex; padding-left:0.5em; padding-right:0.5em; padding-top:0.15em; padding-bottom:0.15em; border:0.15em solid var(--weiss); border-radius:1.5em; color:var(--weiss); font-size:2em; position:fixed !important; top:10em; width:100vw; max-width:30em; justify-content:center; z-index:10;}*/ .zahl {text-align:center; padding-left:0.5em; padding-right:0.5em; padding-top:0.15em; padding-bottom:0.15em; border:0.15em solid var(--weiss); border-radius:1.5em; color:var(--weiss); display:inline-block; font-size:2em;} /*.zahl {margin-left:-1em; padding-left:0.5em; padding-right:0.5em; padding-top:0.15em; padding-bottom:0.15em; border:0.15em solid black; border-radius:1.5em; color:var(--weiss); display:inline-block; font-size:2em; top:18em; position:fixed !important;} /*.zahl {margin-left:-1em; padding-left:0.5em; padding-right:0.5em; padding-top:0.15em; padding-bottom:0.15em; border:0.15em solid black; border-radius:1.5em; color:black; font-size:2em; top:18em; position:fixed !important;} /* Zahlen 1 bis 3 als countdown */ .zahl1 {-webkit-animation:fade1 3s linear forwards;animation:fade1 3s linear forwards;} @-webkit-keyframes fade1 {0%,66%,100% { opacity:0; } 76%,90% { opacity:1; }} @keyframes fade1 {0%,66%,100% { opacity:0; } 76%,90% { opacity:1; }} .zahl2 {-webkit-animation:fade2 3s linear forwards;animation:fade2 3s linear forwards;} @-webkit-keyframes fade2 { 0%,33%,66%,100% { opacity:0; } 43%,56% { opacity:1; }} @keyframes fade2 { 0%,33%,66%,100% { opacity:0; } 43%,56% { opacity:1; }} .zahl3 {-webkit-animation:fade3 3s linear forwards;animation:fade3 3s linear forwards;} @-webkit-keyframes fade3 { 0%,33%,100% { opacity:0; } 10%,23% { opacity:1; }} @keyframes fade3 { 0%,33%,100% { opacity:0; } 10%,23% { opacity:1; }} /* Ende: Zahlen 1 bis 3 als countdown */ .zeile {display:inline;} /* ohne Zeilenumbruch*/ .zeit {color:var(--blau); background-color:var(--weiss); font-size:0.9em; border:0.1em solid var(--blau); border-radius:1em; margin-top:-2.2em; width:3em;} .zentriert {text-align:center;} /* @media (max-width:767px) and (orientation: landscape) {body {font-size:1.0em; background-color:black;}} @media (max-width:767px) and (orientation: portrait) {body {font-size:1.0em; background-color:silver;}} @media (min-width:768px) {body {font-size:1.0em; background-color:green;}} /* Grenzen aus insta-Video 20.03.24 */ /* mobile @media only screen (max-width:767px) and (orientation: landscape) {body {font-size:0.7em; background-color:black;}} @media only screen (max-width:767px) and (orientation: portrait) {body {font-size:1.0em; background-color:black;}} /* tablet @media only screen (min-width:768px) and (max-width:1023px) and (orientation: landscape) {body {font-size:1.0em; background-color:red;}} @media only screen (min-width:768px) and (max-width:1023px) and (orientation: portrait) {body {font-size:1.4em; background-color:red;}} /* laptop */ @media (min-width:810px) AND (orientation: portrait) {body {font-size:1.6em; background-color:black;}} /* mein iPad ab 810px 27.03.24 */ @media (min-width:1280px) AND (orientation: landscape) {body {font-size:0.9em; background-color:var(--weiss);}} /* mein Laptop ab 1280 02.04.24 */ /*@media (min-width:1024px) {body {font-size:1.0em; background-color:green;}} /*@media only screen (min-width:1024px) and (max-width:1439px) and (orientation: portrait) {body {font-size:1.4em; background-color:green;}} /* desktop @media only screen (min-width:1440px) and (orientation: landscape) {body {font-size:1.0em; background-color:yellow;}} @media only screen (min-width:1440px) and (orientation: portrait) {body {font-size:1.4em; background-color:yellow;}} @media only screen {body {font-size:0.7em; background-color:black;}}