@charset 'UTF-8';

a                      { color:#FF0000; text-decoration:underline; cursor:pointer; } /* ohne href="..." */
a:link                 { color:#FF0000; } /* rot        */
a:hover                { color:#FF8800; } /* orange     */
a:active               { color:#FFFF00; } /* gelb       */
a:active:hover         { color:#FFFF00; } /* gelb       */
a:visited              { color:crimson; } /* dunkel rot */
a:visited:hover        { color:#FF8800; } /* orange     */
a:visited:active       { color:#FFFF00; } /* gelb       */
a:visited:active:hover { color:#FFFF00; } /* gelb       */

a[href^='javascript:']:before { content:'[Du hast leider einen Fehler eingebaut: <a href="javascript:"></a> HREF ist kein HTML-Ereignis!] '; }

abbr { color:#FF0000; text-decoration-line:none; }

datalist { display:none; } /* ausblenden für ältere Browser */
datalist > option { background-color:#FFEEEE; color:#000000; }

details > summary { cursor: pointer; text-decoration-line: underline; }

body { background-color:#000000; color:#FFFFFF; font-family:'Arial', 'Verdana'; font-size:14px; margin:0px; padding:0px; }
body.Grafik { background-image:linear-gradient(180deg, #003366 80%, #006666 100%); width:100%; background-attachment:fixed; }

div.Abstand { width:100%; height:10px; position:relative; }
div.C > table { margin-left:auto; margin-right:auto; }
div.Kachel { width:650px; display:inline-block; }
div.FText { text-align:justify; text-justify:inter-word; margin:8px; vertical-align:top; }

h1 { font-size:26px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:12px; }
h6 { font-size:10px; }

div.Kachel > img { width:650px; border:1px solid #FF0000; border-radius:20px; }

input[type='text'], input[type='password'], input[type='date'], input[type='email'], input[type='number'], input[type='button'], input[type='submit'], input[type='file'], input[type='reset'], select, textarea { width:300px; height:24px; padding-left:12px; padding-right:12px; box-sizing:border-box; border:1px solid #FF0000; border-radius:20px; }

input[type='text'], input[type='password'], input[type='date'], input[type='email'], input[type='number'], input[type='file'], select, textarea
{ color:#000000; background-color:#FFEEEE; }
input[type='text']:hover, input[type='password']:hover, input[type='date']:hover, input[type='email']:hover, input[type='number']:hover, input[type='file']:hover, select:hover, textarea:hover
{ color:#FF0000; background-color:#FFEEEE; } /* über  */
input[type='text']:focus, input[type='password']:focus, input[type='date']:focus, input[type='email']:focus, input[type='number']:focus,  input[type='file']:focus, select:focus, textarea:focus
{ color:#000000; background-color:#FFFFFF; } /* fokus */
input[type='text']:active, input[type='password']:active, input[type='date']:active, input[type='email']:active, input[type='number']:active, input[type='file']:active, select:active, textarea:active
{ color:#000000; background-color:#FFFFFF; } /* aktiv */
input[type='text']:focus:hover, input[type='password']:focus:hover, input[type='date']:focus:hover, input[type='email']:focus:hover, input[type='number']:focus:hover, input[type='file']:focus:hover, select:focus:hover, textarea:focus:hover
{ color:#000000; background-color:#FFFFFF; } /* über und fokus */

input[type='button'], input[type='submit'], input[type='reset'] { color:#000000; background-color:#FF8888; }
input[type='button']:hover, input[type='submit']:hover, input[type='reset']:hover { color:#000000; background-color:#FF6666; }
input[type='button']:focus, input[type='submit']:focus, input[type='reset']:focus { color:#000000; background-color:#FF8888; }
input[type='button']:active, input[type='submit']:active, input[type='reset']:active { color:#000000; background-color:#FF4444; }
input[type='button']:focus:hover, input[type='submit']:focus:hover, input[type='reset']:focus:hover { color:#000000; background-color:#FF6666; }
input[type='button']:hover:active, input[type='submit']:hover:active, input[type='reset']:hover:active { color:#000000; background-color:#FF4444; }
input[type='button']:focus:active, input[type='submit']:focus:active, input[type='reset']:focus:active { color:#000000; background-color:#FF4444; }
input[type='button']:focus:hover:active, input[type='submit']:focus:hover:active, input[type='reset']:focus:hover:active { color:#000000; background-color:#FF4444; }

img.Sicherheitskode { width:300px; height:50px; cursor:pointer; box-sizing:border-box; border:#FF0000 1px solid; border-radius:20px; }
img.Sicherheitskode:hover { border:#000000 1px solid; }

input[type='checkbox'], input[type='radio'],
input[type='checkbox']:hover, input[type='radio']:hover,
input[type='checkbox']:focus, input[type='radio']:focus,
input[type='checkbox']:active, input[type='radio']:active
{ border: 1px solid #FF0000; border-radius: 3px; background-color:white; accent-color:red; }

/* Das können Browser leider noch nicht */
/* datalist { border: 1px solid #FF0000; border-radius: 3px; background-color:white; accent-color:red; } */

/* getrennt wegen kompatibilität */
input::placeholder,                 textarea::placeholder               { color:#909090; }
input:-ms-input-placeholder,        textarea:-ms-input-placeholder      { color:#909090; }
input::-ms-input-placeholder,       textarea::-ms-input-placeholder     { color:#909090; }
input:-moz-placeholder,             textarea:-moz-placeholder           { color:#909090; opacity:1; }
input::-moz-placeholder,            textarea::-moz-placeholder          { color:#909090; opacity:1; }
input::-webkit-input-placeholder,   textarea::-webkit-input-placeholder { color:#909090; }

input[type='number'] { font-family:'Arial', 'Verdana'; }

label:hover { color:red; }

select.Pfeil { -moz-appearance:none; -webkit-appearance:none; appearance:none; } /* stil entfernen */

/* --Nicht getestet! -- */

/* IE, EDGE Dateiauswahl */
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) /** NUR IE 10+ **/
{
input[type='file']::-ms-browse { color:#000000; background-color:#FFFF88; border-top-left-radius:10px 28px; border-bottom-right-radius:20px 28px; }
input[type='file']::-ms-browse:hover              { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:focus              { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:active             { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:hover        { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:hover:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:hover:active { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-value { background-color:transparent; border:0px; }
input[type='file']::-ms-value:hover { color:#FF0000; }
}

@supports (-ms-ime-align:auto) /** NUR Edge 12+ **/
{
input[type='file']::-ms-browse { color:#000000; background-color:#FFFF88; border-top-left-radius:10px 28px; border-bottom-right-radius:20px 28px; }
input[type='file']::-ms-browse:hover              { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:focus              { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:active             { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:hover        { color:#000000; background-color:#FF8888; }
input[type='file']::-ms-browse:hover:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-browse:focus:hover:active { color:#000000; background-color:#FF4444; }
input[type='file']::-ms-value { background-color:transparent; border:0px; }
input[type='file']::-ms-value:hover { color:#FF0000; }	
}

/* Chromium */
@media all and (-webkit-min-device-pixel-ratio:0) /* NUR Chrome oder Safari */
{
input[type='file']::-webkit-file-upload-button { color:#000000; background-color:#FFFF88; border-top-left-radius:10px 28px; border-bottom-right-radius:20px 28px; }
input[type='file']::-webkit-file-upload-button:hover              { color:#000000; background-color:#FF8888; }
input[type='file']::-webkit-file-upload-button:focus              { color:#000000; background-color:#FF8888; }
input[type='file']::-webkit-file-upload-button:active             { color:#000000; background-color:#FF4444; }
input[type='file']::-webkit-file-upload-button:focus:hover        { color:#000000; background-color:#FF8888; }
input[type='file']::-webkit-file-upload-button:hover:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-webkit-file-upload-button:focus:active       { color:#000000; background-color:#FF4444; }
input[type='file']::-webkit-file-upload-button:focus:hover:active { color:#000000; background-color:#FF4444; }
}

/* -------------------- */

p.P1, span.P1 { font-size:26px; }
p.P2, span.P2 { font-size:20px; }
p.P3, span.P3 { font-size:16px; }
p.P4, span.P4 { font-size:14px; }
p.P5, span.P5 { font-size:12px; }
p.P6, span.P6 { font-size:10px; }

/* für IE */
select:focus::-ms-value { background-color:transparent; color:#000000; } /*  farbkorrektur für dropdown */
select::-ms-expand { display:none; } /* pfeil entfernen */
/* Der Pfeil muss extra eingefügt werden. Es kann nicht automatisch unterschieden werden zwichen dropdown und mehrfach-auswahl */
select.Pfeil, input[type='text'].Pfeil { background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9J2JsYWNrJyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+'); background-repeat:no-repeat; background-position:265px 50%; }
select.Pfeil:hover, input[type='text'].Pfeil:hover { background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9J3JlZCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnPjxwYXRoIGQ9J003IDEwbDUgNSA1LTV6Jy8+PHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPjwvc3ZnPg'); background-repeat:no-repeat; background-position:265px 50%; }

select optgroup              { background-color:transparent; color:#000000; } /* Standardwert */
select option                { background-color:transparent; color:#000000; } /* Standardwert */
select option:hover          { background-color:transparent; color:#FF0000; } /* bei Drüberfahren */
select option:active         { background-color:#FF0000; color:#000000; } /* bei Drücken und Halten */
select option:checked        { background-color:#FF8888; color:#000000; } /* ausgewählte Option */
select option:checked:hover  { background-color:#FF8888; color:#000000; } /* ausgewählte Option bei Drüberfahren */
select option:checked:active { background-color:#FF0000; color:#000000; } /* ausgewählte Option bei Drücken und Halten */

/* Markierung */
::selection         { color:rgba(0,0,0, 0.99); background:rgba(255,0,0, 0.99); } /* chromium fix mit alpha */
img::selection      { background:rgba(255,0,0, 0.5); }
@-moz-document url-prefix() /* NUR FF */
{
:-moz-selection     { color:#000000; background:#FF0000; }
::-moz-selection    { color:#000000; background:#FF0000; }
img:-moz-selection  { background:rgba(255,0,0, 0.5); }
img::-moz-selection { background:rgba(255,0,0, 0.5); }
}

span.K { font-size:12px; } /* Klein */
span.Proportional { font-family:'Consolas', 'Courier New'; }
span.O { color:#FF8800; } /* Orange - stilbezogene Farbe */
span.R { color:#FF0000; } /* Rot     */
span.G { color:#00FF00; } /* Grün    */
span.B { color:#0000FF; } /* Blau    */
span.Y { color:#FFFF00; } /* Y= gelb */
span.M { color:#FF00FF; } /* Magenta */
span.T { color:#00FFFF; } /* Türkis  */
span.Z { color:#000000; } /* swarZ   */
span.W { color:#FFFFFF; } /* Weiss   */

textarea { font-family:'Arial', 'Verdana'; font-size:13.3333px; } /* Standard nachahmen aber mit Arial */
textarea.N { width:600px; height:350px; }

table { border-collapse:separate; border:1px solid #FF0000; caption-side:top; border-spacing:0px; }
table > caption { color:crimson; font-size:16px; font-weight:bold; margin-top:4px; white-space:nowrap; text-align:center; }
th, td { border:1px solid #FF0000; padding:2px 4px; }

table.Rund { border:0px; }
table.Rund th, table.Rund td { border:0px; }
table.Rund > tbody > tr:first-child > td { border-top:1px solid #FF0000; }
table.Rund > tbody > tr > td:first-child { border-left:1px solid #FF0000; }
table.Rund > tbody > tr > td { border-right:1px solid #FF0000; border-bottom:1px solid #FF0000; }
table.Rund > tbody > tr:first-child > td:first-child { border-top-left-radius:12px; }
table.Rund > tbody > tr:first-child > td:last-child { border-top-right-radius:12px; }
table.Rund > tbody > tr:last-child > td:first-child { border-bottom-left-radius:12px; }
table.Rund > tbody > tr:last-child > td:last-child { border-bottom-right-radius:12px; }

/* Tabelle: Unsichtbar (Ohne Rahmen), Breit oder beides
Zellen können Centriert, Unsichtbar oder beides sein */
table.U  { border:0px; }
table.B  { width:100%; }
table.C  { margin-left:auto; margin-right:auto; }
tr.U > td, tr.U > th { border:0px; }

table.GU { border:0px; }
table.GU > thead > tr > th, table.GU tr > td { border:0px; } 

th.U, td.U { border:0px; }
th.L, td.L { text-align:left; } /* standard */
th.R, td.R { text-align:right; }
th.C, td.C { text-align:center; }

td.O { vertical-align:top; } /* Inhalt Oben ausrichten */
td.A { margin:0px; padding:0px; } /* Abstandslos */