*			{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.navi:link		{background: #FFFFFF; color: #FFFFFF; text-decoration: none}
a.navi:visited		{background: #FFFFFF; color: #FFFFFF; text-decoration: none}
a.navi:active		{background: #74BBEC; color: #FFFFFF; text-decoration: none}
a.navi: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: #eee; flex: 1;}
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}
.animated-text 		{overflow: hidden; height:1.2em; font-size: 16px; word-wrap: break-word; white-space: nowrap; animation: typing 2s steps(48) forwards;}

@keyframes typing 	{from { width: 0; } to { width: 48ch; } }

div.test1 		{border: solid #FFFFFF; transform: translate(10px, 10px) rotate(-3deg); width: 320px; height: 47px; background: #FFFFFF; color: #B00005; font-size: 34px;}
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) } }

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: #eeeeee; 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}}



.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);}
}



/* Graustufen-Filter für die 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);
}