/* -------------------------------------------------------------------------------------------- */ /* --- ACHTUNG: DIESE DATEI ERSETZT IN ZUKUNFT DIE ALTE STYLE.CSS SOWIE DIE ANIMATIONEN.CSS --- */ /* -------------------------------------------------------------------------------------------- */ * {box-sizing: border-box;} body {margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: system-ui, sans-serif; font-size: 14px} .container {max-width: 1000px; margin: 0 auto; padding: 0.7em;} .container_counter {max-width: 1000px; margin: 0 auto; padding: 0.7em;} a.navbar:link {background: #000000; color: #FFFFFF; text-decoration: none} a.navbar:visited {background: #000000; color: #FFFFFF; text-decoration: none} a.navbar:active {background: #74BBEC; color: #FFFFFF; text-decoration: none} a.navbar:hover {background: #74BBEC; color: #FFFFFF; text-decoration: none} a.footer:link {color: #FFFFFF; text-decoration: none} a.footer:visited {color: #FFFFFF; text-decoration: none} a.footer:active {color: #FFFFFF; text-decoration: none} a.footer:hover {color: #FFFFFF; text-decoration: underline} a:link {color: #000000; text-decoration:underline} a:visited {color: #000000; text-decoration:underline} a:active {color: #000000; text-decoration:underline} a:hover {color: #000000; text-decoration:none} nav {background: #000000;} nav a {display: inline-block; padding: 0.4em 0.4em; background: #000000;} header {background: #B00005; color: white; font-size: 16px;} main {background: #eeee; flex: 1;} /* Dark Mode Überschreibung für den Hauptinhaltsbereich */ html.theme-dark main { /* Setzt den Hauptinhaltsbereich auf einen dunklen, aber nicht ganz schwarzen Ton */ background: #252525 !important; /* Stellt sicher, dass die Schriftfarbe im Hauptbereich hell ist, falls sie nicht bereits über den Body gesetzt wurde */ color: #ffffff; } footer {background: #000000; color: white; font-size: 14px} footer_counter {background: #B00005; color: white; font-size: 12px} h2 {font-size: 16px} .smalltext {font-size: 10px} .smalltext2 {font-size: 12px} .animated-text {overflow: hidden; height:1.5em; font-size: 16px; word-wrap: break-word; white-space: nowrap; animation: typing 2s steps(48) forwards;} @keyframes typing {from { width: 0; } to { width: 48ch; } } h3 {font-size: 1.3em; line-height: 0.5em; margin: 0.3em 0.3em 1em 0.3em; color: #B00005; text-shadow: rgba(0, 0, 0, 0.5) -1px 0, rgba(0, 0, 0, 0.3) 0 -1px, rgba(255, 255, 255, 0.5) 2px 2px, rgba(0, 0, 0, 0.3) -1px -2px;} textarea {width:100%;} .bilddropdown {} .bilddropdown-content {display: none; position: absolute; background-color: #8c8c8c; min-width: 130px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;} .bilddropdown:hover .bilddropdown-content {display: block;} .bilddesc {padding: 15px; text-align: center;} .note-box{margin:.5em 0 1em} .note-box.aside{text-align:left}@media (min-width:60em ){.note-box.aside{float:right;width:auto;max-width:30em;margin:.5em 0 1em 1em}} .note-box-title, .note-box-footer{margin:0;font-size:102%;padding:0 10px;border-width:thin;border-style:solid solid none;border-radius:0 .7em 0 0;color:#fff} .note-box-text:last-child{border-radius:0 0 .7em .7em} .note-box-footer{border-style:none solid solid;border-radius:0 0 .7em .7em} .note-box-text{margin:-1px 0 0;padding:4px 12px;background-color:#fff;border-width:thin;border-style:solid} .note-box-text,#a#b{border-style:solid solid none;margin:0} .note-box-text:last-child{border-style:solid} .note-box-red > .note-box-title{border-color:#ff0000;background-color:#ff0000} .note-box-red > .note-box-text{border-color:#ff0000;background-color:#ffaaaa} .note-box-ora > .note-box-title{border-color:#ddaa00;background-color:#ddaa00} .note-box-ora > .note-box-text{border-color:#ddaa00;background-color:#ffeeaa} .note-box-gre > .note-box-title{border-color:#008000;background-color:#008000} .note-box-gre > .note-box-text{border-color:#008000;background-color:#a5ffa5} .note-box-bla > .note-box-title{border-color:#000000;background-color:#000000} .note-box-bla > .note-box-text{border-color:#000000;background-color:#aaaaaa} .note-box-blu > .note-box-title{border-color:#006699;background-color:#006699} .note-box-blu > .note-box-text{border-color:#006699;background-color:#aaeeff} .note-box-example-wiki,.note-box-example-code{margin-top:-1px;border-width:thin;border-style:solid;background-color:#fffbf0;overflow:auto}.note-box-example-wiki,.note-box-example-code,#a#b{border-style:solid solid none;margin-top:0}.note-box-example-code{font:15.5px/19px monospace;white-space:pre}.note-box-example-code .ln-xtra,.note-box-example-code li.ln-xtra,.note-box-example-code div.ln-xtra{background-color:#fcc}.note-box-example-code pre{margin:0;padding:0;border:none;background-color:transparent}.note-box-continuation .note-box-title{background-color:#5c82d9;border-color:#5c82d9}.note-box-continuation .note-box-text{width:100%;padding:0;border-color:#aec3ef;border-radius:0;background-color:#edf2ff;color:#5c82d9}.note-box-continuation .note-box-title + .note-box-text{border-color:#5c82d9}.note-box-continuation .note-box-text td{width:33%;padding:0;text-align:center}.note-box-continuation .note-box-text td:first-child{padding-left:10px;text-align:left}.note-box-continuation .note-box-text td:last-child{padding-right:10px;text-align:right}.smetadaten{float:right}ul.siconset{margin:0;padding:0;list-style-type:none;list-style-image:none}span.sicon{display:inline-block;position:relative;width:32px;height:32px;overflow:hidden}li.sicon{float:left;position:relative;width:32px;height:32px;overflow:hidden;margin:0;padding:0}.sicon img{position:absolute;border:0;max-width:none}span.bricon{vertical-align:middle}.bricon .version{position:absolute;bottom:0;left:0;right:0;font:bold 10px/11px sans-serif;text-align:center}.sicon_op img{top:-0px;left:0}.sicon_ie img{top:-31px;left:0}.sicon_ie8 img{top:-31px;left:-279px}.sicon_ie9 img{top:-31px;left:-310px}.sicon_ie10 img{top:-31px;left:-341px}.sicon_ie11 img{top:-31px;left:-372px}.sicon_edge img{top:-31px;left:-403px}.sicon_fx img{top:-62px;left:0}.sicon_saf img{top:-93px;left:0}.sicon_saf8 img{top:-93px;left:-372px}.sicon_saf9 img{top:-93px;left:-403px}.sicon_saf10 img{top:-93px;left:-434px}.sicon_saf11 img{top:-93px;left:-465px}.sicon_chr img{top:-155px;left:-0px}.sicon_html2 img{top:-186px;left:-0px}.sicon_html3_2 img{top:-186px;left:-31px}.sicon_html4 img{top:-186px;left:-62px}.sicon_html5 img{top:-186px;left:-93px}.sicon_html5v img{top:-186px;left:-124px}.sicon_xhtml1 img{top:-186px;left:-217px}.sicon_xhtml1_1 img{top:-186px;left:-248px}.sicon_css1 img{top:-217px;left:-0px}.sicon_css2 img{top:-217px;left:-31px}.sicon_css2_1 img{top:-217px;left:-62px}.sicon_css3 img{top:-217px;left:-93px}.sicon_dom1 img{top:-217px;left:-465px}.sicon_dom2 img{top:-217px;left:-434px}.sicon_dom3 img{top:-217px;left:-403px}.sicon_ecma1 img{top:-217px;left:-186px}.sicon_ecma2 img{top:-217px;left:-217px}.sicon_ecma3 img{top:-217px;left:-248px}.sicon_ecma4 img{top:-217px;left:-279px}.sicon_ecma5 img{top:-217px;left:-310px}.sicon_ecma6 img{top:-217px;left:-341px}.sicon_js_ms img{top:-248px;left:-0px}.sicon_js1_0 img{top:-248px;left:-31px}.sicon_js1_1 img{top:-248px;left:-62px}.sicon_js1_2 img{top:-248px;left:-93px}.sicon_js1_3 img{top:-248px;left:-124px}.sicon_js1_4 img{top:-248px;left:-155px}.sicon_js1_5 img{top:-248px;left:-186px}.sicon_js1_6 img{top:-248px;left:-217px}.sicon_js1_7 img{top:-248px;left:-248px}.sicon_js1_8 img{top:-248px;left:-279px}.sicon_jq img{top:-310px;left:-0px}.sicon_jq1_0 img{top:-310px;left:-31px}.sicon_jq1_1 img{top:-310px;left:-62px}.sicon_jq1_2 img{top:-310px;left:-93px}.sicon_jq1_3 img{top:-310px;left:-124px}.sicon_jq1_4 img{top:-310px;left:-155px}.sicon_jq1_5 img{top:-310px;left:-186px}.sicon_jq1_6 img{top:-310px;left:-217px}.sicon_achtung img{top:-279px;left:-0px}.sicon_visuell img{top:-279px;left:-31px}.sicon_aural img{top:-279px;left:-62px}.sicon_print img{top:-279px;left:-93px}.sicon_ro img{top:-279px;left:-124px}.sicon_rw img{top:-279px;left:-155px}.sicon_frei img{top:-279px;left:-186px}.sicon_leer img{top:-279px;left:-217px}.sicon_leer1 img{top:-279px;left:-248px}.sicon_leer2 img{top:-279px;left:-279px}.sicon_xml1 img{top:-186px;left:-403px}.sicon_xslt1 img{top:-186px;left:-434px}.sicon_xpath1 img{top:-186px;left:-465px}.sicon_svg1 img{top:-279px;left:-0px}.sicon_svg1_1 img{top:-279px;left:-31px}.sicon_svg1_2 img{top:-279px;left:-62px}.sicon_svg2 img{top:-279px;left:-93px}.sicon_mathml1 img{top:-279px;left:-186px}.sicon_mathml2 img{top:-279px;left:-217px}.sicon_mathml3 img{top:-279px;left:-248px}.sicon_php4 img{top:-0px;left:-0px}.sicon_php5 img{top:-0px;left:-31px}.sicon_php7 img{top:-0px;left:-62px}.sicon_perl5_6 img{top:-31px;left:-0px}.sicon_perl5_8 img{top:-31px;left:-31px}.sicon_perl5_10 img{top:-31px;left:-62px}.sicon_perl6 img{top:-31px;left:-93px}.sicon_java img{top:-341px;left:0}.sicon_java0 img{top:-341px;left:-31px}.sicon_java1 img{top:-341px;left:-62px}.sicon_java2 img{top:-341px;left:-93px}.sicon_java3 img{top:-341px;left:-124px}.sicon_java4 img{top:-341px;left:-155px}.sicon_java5 img{top:-341px;left:-186px}.sicon_java6 img{top:-341px;left:-217px}.sicon_java7 img{top:-341px;left:-248px}.sicon_java8 img{top:-341px;left:-279px}.sicon_as1 img{top:-62px;left:-0px}.sicon_as2 img{top:-62px;left:-31px}.sicon_as3 img{top:-62px;left:-62px}.sicon_flash2 img{top:-93px;left:-0px}.sicon_flash3 img{top:-93px;left:-31px}.sicon_flash4 img{top:-93px;left:-62px}.sicon_flash5 img{top:-93px;left:-93px}.sicon_flash6 img{top:-93px;left:-124px}.sicon_flash7 img{top:-93px;left:-155px}.sicon_flash8 img{top:-93px;left:-186px}.sicon_flash9 img{top:-93px;left:-217px}.sicon_flash10 img{top:-93px;left:-248px}.sicon_sl1 img{top:-124px;left:-0px}.sicon_sl2 img{top:-124px;left:-31px}.sicon_sl3 img{top:-124px;left:-62px}.sicon_sl4 img{top:-124px;left:-93px}.sicon_ap1_3 img{top:-155px;left:-0px}.sicon_ap2_0 img{top:-155px;left:-31px}.sicon_ap2_2 img{top:-155px;left:-62px}.sicon_ap2_4 img{top:-155px;left:-93px}.sicon_iis1 img{top:-186px;left:-0px}.sicon_iis2 img{top:-186px;left:-31px}.sicon_iis3 img{top:-186px;left:-62px}.sicon_iis4 img{top:-186px;left:-93px}.sicon_iis5 img{top:-186px;left:-124px}.sicon_iis5_1 img{top:-186px;left:-155px}.sicon_iis6 img{top:-186px;left:-186px}.sicon_iis7 img{top:-186px;left:-217px}.sicon_iis7_5 img{top:-186px;left:-248px}.sicon_cgi1_0 img{top:-217px;left:-0px}.sicon_cgi1_1 img{top:-217px;left:-31px}.sicon_http1_0 img{top:-217px;left:-62px}.sicon_http1_1 img{top:-217px;left:-93px}.sicon_http2 img{top:-217px;left:-155px}.sicon_ssl1 img{top:-248px;left:-62px}.sicon_ssl2 img{top:-248px;left:-93px}.sicon_ssl3 img{top:-248px;left:-124px}.sicon_tls1_0 img{top:-248px;left:-155px}.sicon_tls1_1 img{top:-248px;left:-186px}.sicon_tls1_2 img{top:-248px;left:-217px}.sicon_ssi img{top:-248px;left:-31px}.sicon_ftp img{top:-217px;left:-124px}.sicon_mime1 img{top:-248px;left:-0px}.sicon_android img{top:-310px;left:-0px}.sicon_sass img{top:-310px;left:-31px}.cursordemo{padding:0 2em 0 .2em;border:thin solid;font-weight:bold;background:#e8ddca}.vorlage_bk{margin:10px 0;padding-left:10px;border:thin solid #c62100;border-left-width:10px;border-radius:0 .7em .7em;background-color:#f1f3f4}div.wrapper{width:60%;min-width:600px;display:inline-block}div.wrapper .note-box-example{max-width:600px}table.reference,table.css-reference,table.html5-element-reference,table.html-attribute-reference{table-layout:fixed;width:60%;min-width:600px;display:inline-block;margin-top:0;margin-right:0;border:0 none;background:transparent}table.reference .sicon,table.reference img{vertical-align:middle}table.reference th .sicon{float:right}table.attribute-reference{table-layout:auto;width:60%;min-width:600px}table.attribute-reference > caption{background:#f1f3f4;border:1px solid #d5d5d5;border-bottom:none;padding:0.5em 1em}table.html5-element-reference .syntax p{background-color:#fffbf0;border:1px dashed #e7c157;color:#000000;font-family:monospace;font-size:1.2em;line-height:1.1em;padding:.8em 1em}.wrapper > table{width:100%}table.farbtabelle{border-collapse:separate;border-spacing:.5em}table.farbtabelle > tr > th,table.farbtabelle > tr > td,table.farbtabelle > * > tr > th,table.farbtabelle > * > tr > td{padding:0.4em 1em;text-align:center}table.farbtabelle > tr > td:nth-child(2),table.farbtabelle > * > tr > td:nth-child(2){text-align:left}table.js-attr caption{text-align:left;font-weight:bold;margin-bottom:1em}table.js-attr td{background-color:#dce5ee;padding:.25em 2em .25em .5em}table.js-attr td:first-child{background-color:#cdd8e4}table.js-attr tr:first-child td:last-child{border-top-right-radius:.5em}table.js-attr tr:last-child td:first-child{border-bottom-left-radius:.5em}table.js-attr tr:last-child td:last-child{border-bottom-right-radius:.5em}@media (max-width:75em ){.aside{width:100%;text-align:center}.aside .toc > b{display:block}.aside ul{display:inline;margin:0!important;padding:0!important}.aside li{display:inline;margin:0!important;padding:0!important}.aside li a::after,.aside li b::after,.aside li strong::after{content:url(https://wiki.selfhtml.org/skins/Selfhtml/images/bullet.gif);padding:0 .2em 0 .4em;white-space:nowrap}.aside li b > a::after{content:"";padding:0}.aside .toc > ul:first-of-type > li:first-of-type > a::before,.aside .toc > ul:first-of-type > li:first-of-type > b::before{content:url(https://wiki.selfhtml.org/skins/Selfhtml/images/bullet.gif);padding:0 .4em 0 .2em}} /* ----------------------------------------------------------------------------------------------------------------------- */ /* --- --- --- Enthält Klassen für: Schriftgröße, alternative Schriftart, und Nachtmodus. (Ab Dez. 2025) --- --- --- */ /* --- --- --- Alle textbezogenen Größen nutzen 'rem', um auf die Änderungen des -Elements zu reagieren. --- --- --- */ /* ----------------------------------------------------------------------------------------------------------------------- */ /* 1. BASIS-GRÖSSE (ROOT-Element) */ html { font-size: 16px; /* Standard-Basisgröße */ /* Fügt eine Sanftheit beim Übergang hinzu */ transition: font-size 0.3s ease, background-color 0.3s ease, color 0.3s ease; } /* 2. BODY-Elementeinstellungen */ body { /* MUSS 1rem sein, um die Größe von zu erben */ font-size: 1rem; line-height: 1.6; font-family: Arial, sans-serif; padding: 0; margin: 0; background-color: #ffffff; color: #333333; } /* 3. SCHRIFTGRÖSSEN-KLASSEN (Muss mit dem JS-Klassen-Switching zusammenarbeiten!) */ .size-small { /* Verkleinert die Basisgröße des gesamten Dokuments auf 90% */ font-size: 90% !important; } .size-large { /* Vergrößert die Basisgröße des gesamten Dokuments auf 120% */ font-size: 120% !important; } /* 4. ALTERNATIVE SCHRIFTART */ html.font-alternative body { /* Stellt eine klarere, serifenlose Schriftart ein */ font-family: Verdana, Arial, sans-serif !important; } /* 5. NACHTMODUS (DARK THEME) */ html.theme-dark { /* Basis-Hintergrundfarbe für die gesamte Seite */ background-color: #121212; } html.theme-dark body { /* Helle Textfarbe auf dunklem Hintergrund */ color: #e0e0e0; background-color: #121212; } /* Anpassung der wichtigsten Elemente für den Dark Mode */ html.theme-dark h1, html.theme-dark h2, html.theme-dark h3 { color: #ffffff; } html.theme-dark a { color: #b0c4de; } html.theme-dark button { background-color: #333333; color: #ffffff; border: 1px solid #555555; } /* 6. RELATIVE SCHRIFTGRÖSSEN (WICHTIG!) */ /* Überschriften nutzen rem, um auf die Basisgrößen-Änderung zu reagieren */ h1 { font-size: 2.5rem; color: inherit; /* Nutzt die Farbe vom Body oder Dark Mode */ } p { font-size: 1rem; margin-bottom: 1em; } /* Button-Styling (auch hier: rem/em) */ button { padding: 10px 15px; margin-right: 10px; cursor: pointer; font-size: 1rem; } /* ------------------------------------------------------------- */ /* --- --- --- HEADER - ROTIERENDES LOGO & LOGOTEXTE --- --- --- */ /* ------------------------------------------------------------- */ div.test1 {border: solid #FFFFFF; transform: translate(10px, 10px) rotate(-3deg); width: 320px; height: 47px; background: #FFFFFF; color: #B00005; font-size: 32px;} div.test2 {border: solid #B00005; transform: translate(0px, 10px) rotate(-3deg); width: 320px; height: 47px; background: #B00005; color: #ffffff; font-size: 14px;} .wrap {position: relative;} .elem {position: 20; margin-left: 35; margin-right: auto;} .rotImg {border:0px solid gray;position:absolute;bottom:17px;width:90px;height:90px} .anime {animation: turner 8s infinite linear } @keyframes turner { from { transform: rotateY(0deg) } to { transform: rotateY(360deg) } } /* -------------------------------------------- */ /* --- --- --- HAUPTTEIL - FIELDSET --- --- --- */ /* -------------------------------------------- */ #fieldset_blue {border: 0px solid #135684; box-shadow:0 0 10px #333; border-style: solid; border-radius: 6px; width: 100%; background: #C5E2F7;} #fieldset_red {border: 0px solid #B00005; box-shadow:0 0 10px #333; border-radius: 6px; width: 100%; background: #FFBDBF;} #fieldset_neutral {border: 0px solid #B00005; box-shadow:0 0 10px #333; border-radius: 6px; width: 100%; background: #ffffff;} /* Dark Mode Überschreibungen */ /* 1. Hintergrund der gesamten Seite auf Dunkelgrau setzen */ html.theme-dark { background-color: #1c1c1c; } html.theme-dark body { /* Stellt sicher, dass auch der Body dunkel ist */ background-color: #1c1c1c; color: #e0e0e0; /* Helle Schriftfarbe */ } html.theme-dark a:link {color: #ffffff; text-decoration:underline} html.theme-dark a:visited {color: #ffffff; text-decoration:underline} html.theme-dark a:active {color: #ffffff; text-decoration:underline} html.theme-dark a:hover {color: #ffffff; text-decoration:none} html.theme-dark a.navbar:link {background: #000000; color: #FFFFFF; text-decoration: none} html.theme-dark a.navbar:visited {background: #000000; color: #FFFFFF; text-decoration: none} html.theme-dark a.navbar:active {background: #74BBEC; color: #FFFFFF; text-decoration: none} html.theme-dark a.navbar:hover {background: #74BBEC; color: #FFFFFF; text-decoration: none} html.theme-dark div.test1 {border: solid #FFFFFF; transform: translate(10px, 10px) rotate(-3deg); width: 320px; height: 47px; background: #FFFFFF; color: #B00005; font-size: 32px;} html.theme-dark div.test2 {border: solid #B00005; transform: translate(0px, 10px) rotate(-3deg); width: 320px; height: 47px; background: #B00005; color: #ffffff; font-size: 14px;} /* 2. NEUTRALE BOXEN auf Mittelgrau setzen (ersetzt Weiß) */ html.theme-dark #fieldset_neutral { /* Mittleres Grau für Boxen, guter Kontrast zum #1c1c1c Hintergrund */ background: #585858 !important; color: #ffffff !important; /* Stellt sicher, dass der Text in der Box hell ist */ /* Optional: Ändere den Box-Schatten, damit er im Dark Mode nicht so hell leuchtet */ box-shadow: 0 0 10px #000; } /* 3. BLAUE und ROTE Boxen (Optional, aber empfohlen) */ /* Damit diese Boxen im Dark Mode nicht zu hell leuchten, sollten sie auch abgedunkelt werden */ html.theme-dark #fieldset_blue { background: #174B70 !important; /* Dunklere Blau-Version */ color: #ffffff !important; box-shadow: 0 0 10px #000; } html.theme-dark #fieldset_red { background: #B00004 !important; /* Dunklere Rot-Version */ color: #ffffff !important; box-shadow: 0 0 10px #000; } /* 4. ALTERNATIVE SCHRIFTART - OPTIMIERTE VERSION */ /* REGEL A: Setzt MONOSPACE auf den Body und die Infobox-Selektoren */ /* Dadurch erben alle inneren Texte in den Boxen die Monospace-Schriftart. */ html.font-alternative body, html.font-alternative #fieldset_neutral, html.font-alternative #fieldset_blue, html.font-alternative #fieldset_red { font-family: "Courier New", Courier, monospace; } /* REGEL B: Setzt Überschriften und Buttons AUF DEINE STANDARD-SCHRIFTART zurück */ /* Verhindert, dass Monospace auf Layout-Elementen erscheint. */ html.font-alternative h1, html.font-alternative h2, html.font-alternative h3, html.font-alternative h4, html.font-alternative button { /* WICHTIG: Deine Standard-Schriftart aus dem Body-Selektor verwenden */ font-family: system-ui, sans-serif; } html.font-alternative a:link {color: #ffffff; text-decoration:underline} html.font-alternative a:visited {color: #ffffff; text-decoration:underline} html.font-alternative a:active {color: #ffffff; text-decoration:underline} html.font-alternative a:hover {color: #ffffff; text-decoration:none} html.font-alternative a.navbar:link {background: #000000; color: #FFFFFF; text-decoration: none} html.font-alternative a.navbar:visited {background: #000000; color: #FFFFFF; text-decoration: none} html.font-alternative a.navbar:active {background: #74BBEC; color: #FFFFFF; text-decoration: none} html.font-alternative a.navbar:hover {background: #74BBEC; color: #FFFFFF; text-decoration: none} html.font-alternative div.test1 {border: solid #FFFFFF; transform: translate(10px, 10px) rotate(-3deg); width: 320px; height: 47px; background: #FFFFFF; color: #B00005; font-size: 32px;} html.font-alternative div.test2 {border: solid #B00005; transform: translate(0px, 10px) rotate(-3deg); width: 320px; height: 47px; background: #B00005; color: #ffffff; font-size: 14px;} /* ------------------------------------------------------------ */ /* --- --- --- HAUPTTEIL - STARTSEITE BILDER SLIDER --- --- --- */ /* ------------------------------------------------------------ */ * {box-sizing: border-box;} body {font-family: Verdana, sans-serif;} .mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Caption text */ .text { color: #f2f2f2; font-size: 12px; font-weight: normal; background-color: #B00005; opacity: 0.5; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/4 etc) */ .numbertext { color: #f2f2f2; font-size: 14px; font-weight: bold; background-color: #135684; opacity: 0.5; padding: 8px 12px; position: absolute; top: -5; } /* The dots/bullets/indicators */ .dot { height: 10px; width: 10px; margin: 0 2px; background-color: #bbb; border-radius: 25%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* Fading animation */ .fade { animation-name: fade; animation-duration: 2.0s; } @keyframes fade { from {opacity: .1} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .text {font-size: 11px} } /* -------------------------------------------- */ /* --- --- --- HAUPTTEIL - PINNWAND --- --- --- */ /* -------------------------------------------- */ #related {width: 100%;position: fixed;bottom:0;left:0;background: #bb0000;color: #fff;text-align: center;padding: 5px 0;font-size: 0.8em;z-index:5;} #related a, #related a:hover, #related a:active, #related a:focus, #related a:visited, #related a:link {color:#fff;} #upperarea {width:100%;background-color:#ccc;padding:20px 0 1px;} #board, #cork { width:100%;max-width:100%; height:auto;min-height:200px; margin:20px auto;padding:20px 10px 20px 30px; box-shadow: 0px 0px 10px #333; border:0px solid #aaa; display:flex;flex-flow:row wrap;justify-content:space-around;align-items:baseline; } #board {background-color:#eee;} #cork {background:url(images/cork.png) repeat;} .postit { background:#fefabc linear-gradient(150deg, #efec88 0%,#fefabc 100%); width:260px; height:140px; display:inline-block; margin:0 20px 20px 0; padding:25px 15px 15px; list-style:none; border:1px solid #efec88; box-shadow: 0px 2px 4px rgba(0,0,0,0.3); color:#000; border-bottom-right-radius: 60px 5px; position:relative; transition:all 0.3s ease; } .postit::before { background-color: #efef8c; content: ""; position: absolute; z-index: -1; width: 100%; border: 0; right: 0px; top: 0; height: 40px; } .postit::after { content: ""; position: absolute; bottom: -2px; right: -1px; width: 200px; height: 140px; background-image: linear-gradient(173deg, rgba(0,0,0,0) 92%, rgba(0,0,0,0.4) 100%); transform: rotate(4deg); filter: blur(2px); z-index: -1; } .postit h1, .note h1, .postit p, .note p { font-family: 'DPDorkDiary'; text-align:center; line-height:1em; font-weight:bold; font-size: 1.4em; margin: 0.5em 0 0; } .postit p, .note p { font-size:1.1em; margin: 0.5em 0; } .note { background-image: linear-gradient(135deg, #f6f6f6 43%, #e4e9e9 66%); display:inline-block; padding:25px 15px; width:260px; height:320px; margin:0 20px 20px 0; list-style:none; border:1px solid #ddd; box-shadow: 0px 7px 5px rgba(0,0,0,0.4); color:#000; border-bottom-right-radius: 50px 10px; position:relative; transition:all 0.3s ease; } .note::before { content: ""; border-radius: 50%; width: 22px; height: 20px; position: absolute; top: 6px; left: calc(50% - 10px); background-image: radial-gradient(at 30% 30%, rgba(255,255,192,0.6) 5%, rgba(255,255,192,0.2) 20%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0.5) 100%); border:1px solid rgba(0,0,0,0.2); box-shadow: 1px 3px 3px #666; } .note::after { content: ""; position: absolute; bottom: -4px; right: -1px; width: 200px; height: 140px; background-image: linear-gradient(173deg, rgba(0,0,0,0) 92%, rgba(0,0,0,0.6) 100%); transform: rotate(3deg); filter: blur(2px); z-index: -1; } .note:nth-child(3n), .postit:nth-child(3n) { transform: rotate(5deg); } .note:nth-child(3n-1), .postit:nth-child(3n-1) { transform: rotate(0deg); } .note:nth-child(3n-2), .postit:nth-child(3n-2) { transform: rotate(-5deg); } .note:nth-child(1)::before { background-color:#135684; } .note:nth-child(2)::before { background-color:#000000; } .note:nth-child(3)::before { background-color:#B00005; } .note:nth-child(4)::before { background-color:#FFFFFF; } .note:nth-child(5)::before { background-color:#135684; } .note:nth-child(6)::before { background-color:#000000; } .note:nth-child(7)::before { background-color:#B00005; } .note:nth-child(8)::before { background-color:#FFFFFF; } .note:nth-child(9)::before { background-color:#135684; } .note:nth-child(10)::before { background-color:#000000; } .note:nth-child(11)::before { background-color:#B00005; } .note:nth-child(12)::before { background-color:#FFFFFF; } .note:nth-child(13)::before { background-color:#135684; } .note:nth-child(14)::before { background-color:#000000; } .note:nth-child(15)::before { background-color:#B00005; } .note:nth-child(16)::before { background-color:#FFFFFF; } .note:nth-child(17)::before { background-color:#135684; } .note:nth-child(18)::before { background-color:#000000; } .note:nth-child(19)::before { background-color:#B00005; } .note:nth-child(20)::before { background-color:#FFFFFF; } .postit:hover, .note:hover { transform: scale(1.1); z-index: 2; } /* ----------------------------------------------- */ /* --- --- --- HAUPTTEIL - ANIMATIONEN --- --- --- */ /* ----------------------------------------------- */ .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn2 { -webkit-animation-name: lightSpeedIn2; animation-name: lightSpeedIn2; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes lightSpeedIn2 { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn2 { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .tada { -webkit-animation-name: tada; animation-name: tada; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .flash { -webkit-animation-name: flash; animation-name: flash; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .shake { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } /* ------------------------------------------------- */ /* --- --- --- FOOTER - ROTIERENDES LOGO --- --- --- */ /* ------------------------------------------------- */ .htmlrect { width: 90px; height: 90px; position: relative; animation: spin 5s infinite ease-in-out; } @keyframes spin { 0% {transform:rotate(0deg);} 100% {transform:rotate(359deg);} } .rotate { animation: rotate 5s infinite linear; } @keyframes rotate { 0% {transform:rotate(0deg);} 100% {transform:rotate(359deg);} } /* -------------------------------------------------------------------------------- */ /* --- --- --- FOOTER - GRAUSTUFEN FILTER EINBINDUNG SOCIAL MEDIA ICONS --- --- --- */ /* -------------------------------------------------------------------------------- */ .social-media-container img { /* Macht die Bilder schwarz-weiß */ filter: grayscale(100%); /* Optional: Macht sie etwas transparenter, damit sie nicht so wuchtig sind */ opacity: 0.7; /* Sorgt für einen weichen Übergang beim Drüberfahren */ transition: filter 0.3s ease, opacity 0.3s ease; } /* Effekt beim Maus-Hover (Drüberfahren) */ .social-media-container img:hover { /* Farbe wieder voll da */ filter: grayscale(0%); /* Volle Deckkraft */ opacity: 1.0; /* Optional: Leichter Zoom-Effekt */ transform: scale(1.1); }