/* 
    Created on : 14.02.2023, 11:13:06
    Author     : johannes
*/

/**
    Externe Schriftart definieren
**/
@font-face {
    font-family: "Atari ST";
    src: url(../schriftarten/AtariST8x16SystemFont.woff);
}
@font-face {
    font-family: "ZXSpectrum";
    src: url(../schriftarten/zx_spectrum-7.woff2);
}
@font-face {
    font-family: "PerfectDOS";
    src: url(../schriftarten/Perfect_DOS_VGA_437_Win.woff2);
}
@font-face {
    font-family: "ARCADE";
    src: url(../schriftarten/ARCADE.woff2);
}

/**
    Hauptstylesheet
**/
html, body {
    /**height: 100%;*/
    margin: 0;
    background-color: white;
    color: black;
    font-family: "Atari ST";
    cursor: url("../bilder/atari_cursor_default.png"), auto;
}

/**
    Seiten-Container
**/
#container-haupt {
    height: 80vh;
    margin: 50px;
}

#container-menue {
    height: 22px;
    background-color: white;
    border-bottom: 2px solid black;
    font-family: "Atari ST";
    font-size: 14pt;
}

.menuepunkt {
    display: inline-block;
    margin-left: 30px;
    position: relative;
    white-space: nowrap;
}

.menuepunkt-button {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0;
    padding-bottom: 2px;
    background-color: transparent;
    text-transform: uppercase;
    font-family: "Atari ST";
    font-size: 14pt;
    color: black;
    letter-spacing: 1pt;
    font-smooth: never;
    -webkit-font-smoothing : none;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
}

.menuepunkt-button:hover {
    color: white;
    background-color: black;
}

.menuepunkt-untermenue {
    display: none;
    position: absolute;
    top: 22px;
    left: -5px;
    padding-top: 0;
    padding-bottom: 0;
    border: 2px solid black;
    background-color: white;
    z-index: 1;
    font-smooth: never;
    -webkit-font-smoothing : none;
}

.menuepunkt:hover .menuepunkt-untermenue {
    display: block;
}

.menuepunkt:hover .menuepunkt-button {
    color: white;
    background-color: black;
}

.menuepunkt-untermenue hr {
    border: 1px dotted black;
    margin-top: 5px;
    margin-bottom: 12px;
    padding: 0;
}

.untermenue-menuepunkt {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.untermenue-menuepunkt:hover {
    color: white;
    background-color: black;
    cursor: default;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
}

.untermenue-menuepunkt-textausgegraut {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0;
    padding-bottom: 0;
    background: url(../bilder/text_ausgegraut_hintergrund.png);
    background-size: auto;
    background-repeat: repeat;
    color: black;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    cursor: default;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
}

/**
    Hauptinhalt der Seite
**/
section {
    display: table;
    height: 88vh;
}

aside {
    display: table-cell;
    vertical-align: top;
}

article {
    display: table-cell;
    width: 100%;
    vertical-align: top;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
}

.desktop-element {
    width: 150px;
    padding-top: 5px;
    padding-bottom: 15px;
    cursor: default;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
}

.desktop-element-symbol {
    margin: 0 auto;
    width: 64px;
    height: 60px;
}

.desktop-element-text {
    background-color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 11pt;
    font-family: "ZXSpectrum";
    font-weight: lighter;
    height: 17px;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

.desktop-element-papierkorb {
    width: 150px;
    margin-top: 200px;
    cursor: default;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
}

#fenster {
    border: 2px solid black;
    max-width: 1024px;
    min-width: 640px;
    min-height: 350px;
    background-color: white;
    box-shadow: 3px 3px black;
}

#fenster-fensterleiste {
    display: table-row;
    height: 18px;
    white-space: nowrap;
}

#fenster-fensterleiste-breich-links {
    display: table-cell;
    background-image: url(../bilder/fenster_oben_links.png);
    background-repeat: no-repeat;
    background-position: top center;
    border-right: 2px solid black;
}

#fenster-fensterleiste-breich-mitte {
    display: table-cell;
    width: 100vw;
    text-align: center;
    background-image: url(../bilder/fenster_oben_mitte_hintergrund.png);
    background-repeat: repeat-x;
    background-position: top left;
    border-left: 2px solid black;
    border-right: 2px solid black;
    text-transform: uppercase;
}

#fenster-fensterleiste-breich-mitte span {
    display: inline-block;
    font-size: 14pt;
    line-height: 12pt;
    background-color: white;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0;
    vertical-align: middle;
}

#fenster-fensterleiste-breich-rechts {
    display: table-cell;
    background-image: url(../bilder/fenster_oben_rechts.png);
    background-repeat: no-repeat;
    background-position: top center;
    border-left: 2px solid black;
}

.platzhalter1, .platzhalter2 {
    width: 20px;
    height: 15px;
}

#fenster-infoleiste {
    height: 18px;
    line-height: 18px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    font-family: "Atari ST";
    font-size: 14pt;
    padding-left: 12px;
}

#fenster-datenbereich {
    min-height: 350px;
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: scroll;
    font-family: "PerfectDOS";
    font-size: 13pt;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 20px;
}

#fenster-datenbereich::-webkit-scrollbar {
    width: 20px;
}

#fenster-datenbereich::-webkit-scrollbar-track {
    background-image: url(../bilder/fenster_scrollbereich_hintergrund.png);
    background-position: top center;
    background-repeat: repeat-y;
    border-left: 2px solid black;
}

#fenster-datenbereich::-webkit-scrollbar-thumb {
    background-color: white;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 2px solid black;
}

#fenster-datenbereich::-webkit-scrollbar-button:single-button:vertical:decrement {
    /* Hoch */
    background-color: white;
    height: 18px;
    border-bottom: 1px solid black;
    border-left: 2px solid black;
    background-image: url(../bilder/fenster_scrollbereich_pfeil_hoch.png);
    background-position: center center;
    background-repeat: no-repeat;
}

#fenster-datenbereich::-webkit-scrollbar-button:single-button:vertical:increment {
    /* Runter */
    background-color: white;
    height: 18px;
    border-top: 1px solid black;
    border-left: 2px solid black;
    background-image: url(../bilder/fenster_scrollbereich_pfeil_runter.png);
    background-position: center center;
    background-repeat: no-repeat;
}

#fenster-fussleiste {
    display: table-row;
    height: 18px;
    background-color: white;
    border-top: 2px solid black;
    white-space: nowrap;
}

#ffl1 {
    display: table-cell;
    width: 20px;
    background-image: url(../bilder/fenster_unten_links.png);
    background-position: left center;
    background-repeat: no-repeat;
    border-top: 2px solid black;
    border-right: 2px solid black;
}

#ffl2 {
    display: table-cell;
    width: 100vw;
    background-color: white;
    border-top: 2px solid black;
}

#ffl3 {
    display: table-cell;
    width: 20px;
    background-image: url(../bilder/fenster_unten_mitte_rechts.png);
    background-position: right center;
    background-repeat: no-repeat;
    border-left: 2px solid black;
    border-top: 2px solid black;
}

#ffl4 {
    display: table-cell;
    width: 20px;
    background-image: url(../bilder/fenster_unten_rechts.png);
    background-position: right center;
    background-repeat: no-repeat;
    border-left: 2px solid black;
    border-top: 2px solid black;
}

h1, h2, h3, h4 {
    font-family: "Atari ST";
    font-weight: normal;
    text-decoration: underline;
    margin-top: 0;
}

#jotoma-logo {
    width: 150px;
    height: auto;
}

#schnellmenue {
    text-align: center;
}

#counter-title {
    text-align: center;
    margin-bottom: 0;
    font-weight: bold;
}

#counter-container {
    margin: 5px auto;
    width: 310px;
    height: 1.6ch;
    background-image: url(../bilder/counter_hintergrund.png);
    background-repeat: repeat;
    color: gold;
    font-family: "ARCADE";
    font-size: 42pt;
    text-align: center;
    text-shadow: 0 0 5px orange;
    border: 5px ridge slategray;
    animation-duration: 0.01s;
    animation-name: textflicker;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes textflicker {
    from {
        color: goldenrod;
    }
    to {
        color: gold;
    }
}

/**
    Links
**/
a, a:visited {
    cursor: url("../bilder/atari_cursor_default.png"), auto;
}

a:active, .untermenue-menuepunkt:active, .projekte-element-container:active, .desktop-element:active, .papierkorb-elemente-element:active {
    cursor: url("../bilder/atari_cursor_bee.png"), auto;
}

/**
    Formularelemente
**/

button[value="OK"] {
    padding: 0;
    width: 150px;
    border: 5px solid black;
    font-family: "Atari ST";
    font-size: 16pt;
    font-weight: bold;
    letter-spacing: 3px;
    color: black;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
    -webkit-border-radius: 0;
}

button[value="OK"]:active {
    padding: 0;
    width: 150px;
    border: 5px solid black;
    font-family: "Atari ST";
    font-size: 16pt;
    font-weight: bold;
    letter-spacing: 3px;
    color: white;
    background-color: black;
}

button:not(button[value="OK"]) {
    border: 6px solid black;
    background-color: white;
    color: black;
    padding: 0 12px 0 12px;
    font-family: "Atari ST";
    font-size: 16pt;
    text-transform: uppercase;
    line-height: 16pt;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
    -webkit-border-radius: 0;
}

label {
    display: inline-block;
    width: 160px;
    font-family: "Atari ST";
    font-size: 14pt;
    text-align: right;
}

#benutzerregistrierung label,#benutzeranmeldung label {
    display: inline-block;
    width: 300px;
    font-family: "Atari ST";
    font-size: 14pt;
    text-align: right;
}

label[for="nachricht"] {
    vertical-align: top;
}

input[type="text"], input[type="email"], input[type="password"] {
    width: 40.5ch;
    height: 15pt;
    padding: 0;
    border: none;
    font-family: "Atari ST" !important;
    font-size: 14pt !important;
    background: repeating-linear-gradient(90deg, black 0, black 1ch, transparent 0, transparent 1.5ch) 0 100%/39ch 2px no-repeat !important;
    letter-spacing: 0.5ch !important;
    text-decoration: underline solid white 2px !important;
    cursor: url("../bilder/atari_cursor_default.png"), auto !important;
    -webkit-border-radius: 0;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
    outline: none;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
}

select {
    border: 2px solid black;
    background-color: white;
    font-family: "Atari ST";
    font-size: 14pt;
    color: black;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
    -webkit-border-radius: 0;
}

textarea {
    width: 350px;
    border: 2px solid black;
    color: black;
    background-color: white;
    font-family: "Atari ST";
    font-size: 13pt;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
    -webkit-border-radius: 0;
}

.formular-eingabezeile-info {
    padding-left: 170px;
    font-style: italic;
}

.formular-buttonzeile {
    text-align: center;
}

input[type="submit"], input[type="button"] {
    border: 6px solid black;
    background-color: white;
    color: black;
    padding: 0 12px 0 12px;
    font-family: "Atari ST";
    font-size: 16pt;
    text-transform: uppercase;
    line-height: 16pt;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
    -webkit-border-radius: 0;
}

input[type="reset"] {
    border: 4px solid black;
    background-color: white;
    color: black;
    padding: 0 12px 0 12px;
    font-family: "Atari ST";
    font-size: 16pt;
    text-transform: uppercase;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
    -webkit-border-radius: 0;
}

input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active, button:active {
    background-color: black;
    color: white;
}

.auswahlbuttons-container input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.auswahlbuttons-container label {
    display: inline-block;
    margin-left: 10px;
    width: 80px;
    background-color: white;
    color: black;
    border: 2px solid black;
    font-family: "Atari ST";
    font-size: 14pt;
    text-align: center;
    cursor: url("../bilder/atari_cursor_default.png"), auto;
}

.auswahlbuttons-container input[type="radio"]:checked + label {
    background-color: black;
    color: white;
}

.auswahlbuttons-container input[type="radio"]:focus + label {
    background-color: black;
    color: white;
}

/**
    Infoseite
**/

#info-atari-box {
    margin: auto;
    width: 640px;
    border: 2px solid black;
    padding: 5px;
    margin-top: 10px;
    font-family: "Atari ST";
    font-size: 16pt;
    text-align: center;
    background-color: #eeedef;
}

#info-atari-box-content {
    border: 5px solid black;
    padding: 10px;
}

#info-atari-box-content-title {
    margin: 0;
    padding: 0 0 10px 0;
}

#info-atari-box-content-tos {
    margin: 0;
    padding: 0;
}

#info-atari-box-content hr {
    margin: auto;
    padding: 0;
    border: 1px dotted black;
    width: 400px;
}

#info-atari-box-content-copyright {
    margin: 0;
    padding: 0 0 8px 0;
}

#atari-logo {
    margin-top: 5px;
    width: 66px;
    height: 70px;
    clip-path: inset(2px 2px);
}

video {
    display: block;
    margin: 0 auto;
    max-width: 640px;
    height: auto;
    background-color: black;
}

/**
    Papierkorb
**/
#papierkorb-elemente {
    /* Erst mal leer */
}

.papierkorb-elemente-element {
    display: inline-block;
    width: 120px;
    vertical-align: top;
}

.papierkorb-elemente-element-symbol-ordner {
    margin: auto;
    width: 60px;
    height: 52px;
    background-image: url(../bilder/symbol_ordner.png);
    background-position: center center;
    background-repeat: no-repeat;
}

.papierkorb-elemente-element-symbol-ordner img {
    width: 60px;
    height: 52px;
    border: 0;
}

.papierkorb-elemente-element-text {
    background-color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 11pt;
    font-family: "ZXSpectrum";
    font-weight: lighter;
    min-height: 17px;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

.papierkorb-elemente-element:active .papierkorb-elemente-element-symbol-ordner {
    background-image: url(../bilder/symbol_ordner_markiert.png);
}

.papierkorb-elemente-element:active .papierkorb-elemente-element-text {
    color: white;
    background-color: black;
}

/*
    INFOBOXEN
*/
.infobox {
    margin: auto;
    width: 70%;
    border: 2px solid black;
    padding: 5px;
    background-color: white;
}

.infobox-warnung-text, .infobox-hinweis-text, .infobox-fehler-text, .info-ok-text {
    font-family: "Atari ST";
}

.infobox-warnung {
    min-height: 100px;
    border: 2px solid black;
    background-color: white;
    background-image: url(../bilder/symbol_warnung.png);
    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-position: 15px 15px;
    padding: 5px 15px 5px 96px;
}

.infobox-hinweis {
    min-height: 100px;
    border: 2px solid black;
    background-color: white;
    background-image: url(../bilder/symbol_hinweis.png);
    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-position: 15px 15px;
    padding: 5px 15px 5px 96px;
}

.infobox-fehler {
    min-height: 100px;
    border: 2px solid black;
    background-color: white;
    background-image: url(../bilder/symbol_fehler.png);
    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-position: 15px 15px;
    padding: 5px 15px 5px 96px;
}

.infobox-ok {
    height: 100px;
    border: 2px solid black;
    background-color: white;
    background-image: url(../bilder/d45jjy0-9153a439-9e43-4091-aee3-c8e6dbebc048.gif);
    background-size: 54px 71px;
    background-repeat: no-repeat;
    background-position: 15px 15px;
    padding: 5px 15px 5px 96px;
    vertical-align: middle;
    display: flex;
    align-items: center;
}

/*
    BILDERCONTAINER
*/
.bildercontainer {
    justify-content: center;
    text-align: center;
    font-family: "PerfectDOS";
}

.bildercontainer_bildblock {
    display: inline-block;
    vertical-align: top;
}

.bildercontainer_bild_klein {
    vertical-align: top;
}

.bildercontainer_bildbeschreibung {
    max-width: 300px;
    padding-top: 5px;
    margin: 0 auto 5px auto;
    font-family: "Atari ST";
    font-size: 10pt;
    color: grey;
}

/*
    ARTIKEL
*/
.artikel_auflistung_container {
    display: block;
    width: 980px;
    height: auto;
    margin-bottom: 22px;
    cursor: default;
}

.artikel-trennlinie {
    width: 70%;
    border: 2px dotted black;
    padding: 0;
    margin: 18px auto 18px auto;
}

.artikel_auflistung_container_links {
    display: inline-block;
    width: 110px;
    vertical-align: top;
}

.artikel_auflistung_container_rechts {
    display: inline-block;
    width: 850px;
    vertical-align: top;
}

.artikel_auflistung_container_rechts p {
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.artikel_auflistung_vorschaubild {
    /* Leer */
}

.artikel-titel {
    font-family: "Atari ST";
    font-weight: bold;
}

.artikel-daten {
    font-family: "Atari ST";
    font-size: 10pt;
    text-decoration: underline;
    color: grey;
}

.tabelle-3d-drucker-richtig-kalibrieren {
    width: 90%;
    border: 2px solid silver;
    border-spacing: 5px;
    padding: 3px;
    margin: auto;
}

.tabelle-3d-drucker-richtig-kalibrieren-ueberschrift {
    font-weight: bold;
    padding: 5px;
    background-image: radial-gradient(lightgray 1px, transparent 0);
    background-size: 3px 3px;
    border: 2px solid silver;
    font-family: "Atari ST";
    font-size: 13pt;
    text-align: center;
    text-transform: uppercase;
}

.tabelle-3d-drucker-richtig-kalibrieren-celle-links {
    width: 250px;
    padding: 5px;
    border: 2px solid silver;
    vertical-align: top;
    font-family: "Atari ST";
    font-size: 13pt;
    text-transform: uppercase;
}

.tabelle-3d-drucker-richtig-kalibrieren-celle-rechts {
    padding: 5px;
    vertical-align: top;
}

.tabelle-3d-drucker-richtig-kalibrieren-celle-rechts span {
    font-style: italic;
}

#mathekasten {
    margin: auto;
    display: block;
    color: blue;
}

#mathekasten_teil_links {
    display: inline-block;
}

#mathekasten_teil_rechts {
    height: 80px;
    display: inline-block;
    vertical-align: middle;
}

#mathekasten_teil_links_oben {
    text-align: center;
    padding-bottom: 3px;
    border-bottom: 2px solid blue;
}

#mathekasten_teil_links_unten {
    text-align: center;
    padding-top: 3px;
}

.auflistung-ueberschrift {
    line-height: 22px;
    text-decoration: underline;
}

.tabelle-regulaer {
    border: 2px solid black;
    padding: 5px;
    margin: 0 auto;
}

.tabelle-regulaer thead th {
    border: 2px solid black;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    background-image: radial-gradient(lightgray 1px, transparent 0);
    background-size: 3px 3px;
}

.tabelle-regulaer tbody td:first-of-type {
    min-width: 150px;
    border: 2px solid black;
    font-weight: bold;
    padding: 5px;
    text-align: left;
    background-image: radial-gradient(lightgray 1px, transparent 0);
    background-size: 3px 3px;
}

.tabelle-regulaer tbody td {
    padding: 5px;
    text-align: center;
}

#powered-by {
    line-height: 40px;
    text-align: center;
}

#powered-by img {
    width: auto;
    height: 30px;
    vertical-align: middle;
}

.tabelle-hardware-auflistung {
    width: 90%;
    border: 2px solid silver;
    border-spacing: 5px;
    padding: 3px;
    margin: auto;
}

.tabelle-hardware-auflistung td:first-of-type:not(.tabelle-hardware-auflistung-rubrik) {
    width: 200px;
    border: 2px solid silver;
    padding: 5px;
    text-align: left;
    vertical-align: top;
    font-family: "Atari ST";
    font-size: 13pt;
    text-transform: uppercase;
}

.tabelle-hardware-auflistung td {
    padding: 5px;
    vertical-align: top;
}

.tabelle-hardware-auflistung-rubrik {
    border: 2px solid silver;
    padding: 5px;
    background-image: radial-gradient(lightgray 1px, transparent 0);
    background-size: 3px 3px;
    font-family: "Atari ST";
    font-size: 13pt;
    text-align: center;
}

#pc-profil-menue {
    text-align: center;
    font-size: 14pt;
}

#pc-profil-menue h3 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.pc-profil_benchmarks {
    width: 980px;
}

.pc-profil_benchmarks ul {
    padding-top: 8px;
}

.pc-profil_benchmarks img {
    float: left;
    width: auto;
    height: 100px;
    padding-bottom: 22px;
    vertical-align: top;
    margin-right: 22px;
}

.pc-profil_benchmarks_icon_sonderfall {
    float: left;
    width: auto;
    height: 100px;
    padding-bottom: 50px;
    margin-bottom: 50px;
    vertical-align: top;
    margin-right: 22px;
}

.pc-profil_benchmarks ul ul {
    margin-top: 0;
    padding-top: 0;
    margin-left: 70px;
}

.projekte-elemente {
    width: 980px;
    text-align: center;
}

.projekte-element-container {
    display: inline-block;
    vertical-align: top;
    margin-top: 16px;
    margin-right: 22px;
}

.projekte-element-bild {
    vertical-align: top;
}

.projekte-element-text {
    max-width: 330px;
    padding-top: 12px;
    font-family: "Atari ST";
    font-size: 14pt;
}

.projekte-element-text2 {
    max-width: 330px;
    padding-top: 5px;
}

.tabelle-phoenix-aus-der-asche {
    width: 90%;
    border: 2px solid silver;
    border-spacing: 5px;
    padding: 3px;
    margin: auto;
}

.tabelle-phoenix-aus-der-asche th {
    border: 2px solid silver;
    padding: 5px;
    vertical-align: top;
    background-image: radial-gradient(lightgray 1px, transparent 0);
    background-size: 3px 3px;
    font-family: "Atari ST";
    font-size: 13pt;
    text-transform: uppercase;
}

.tabelle-phoenix-aus-der-asche td:first-of-type {
    width: 200px;
    border: 2px solid silver;
    padding: 5px;
    text-align: left;
    vertical-align: top;
    background-image: radial-gradient(lightgray 1px, transparent 0);
    background-size: 3px 3px;
    font-family: "Atari ST";
    font-size: 13pt;
    text-transform: uppercase;
}

.tabelle-phoenix-aus-der-asche td {
    padding: 5px;
    text-align: left;
    vertical-align: top;
}

pre {
    padding: 20px 30px 20px 30px;
    font-family: "Atari ST";
    font-size: 12pt;
    color: blue;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: whitesmoke;
    border: 3px silver ridge;
}

samp {
    padding: 3px;
    font-family: "Atari ST";
    color: blue;
    background-color: whitesmoke;
}

blockquote {
    margin: 0 auto;
    width: 70%;
    padding: 20px 30px 20px 30px;
    color: navy;
    font-style: italic;
}

.sprung-nach-oben {
    text-align: right;
    font-size: 10pt;
    font-family: "Atari ST";
}

.download {
    padding-left: 30px;
}

/**
    VOREINSTELLUNGEN MODAL
**/
#modal-voreinstellungen {
    display: none;
    position: absolute;
    overflow: visible;
    top: 80px;
    left: 250px;
    width: 500px;
    border: 2px solid black;
    background-color: white;
    padding: 5px;
}

#modal-voreinstellungen-inhalt {
    border: 2px solid black;
    background-color: white;
    padding: 10px;
    text-align: center;
    font-family: "Atari ST";
    font-size: 14pt;
}

#modal-voreinstellungen-inhalt-ueberschirft {
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 10px 0;
}

#modal-voreinstellungen-inhalt-fakeeinstellungen-container-ueberschirft {
    padding: 0;
    margin: 0 0 10px 0;
}

.modal-voreinstellungen-inhalt-fakeeinstellungen-container {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}

.modal-voreinstellungen-inhalt-fakeeinstellungen-container-zellelinks {
    display: table-cell;
    width: 50%;
    text-align: right;
}

.modal-voreinstellungen-inhalt-fakeeinstellungen-container-zellerechts {
    display: table-cell;
    width: 50%;
    text-align: left    
}

.modal-voreinstellungen-inhalt-hintergrundfarbe-container {
    text-align: center;
}

.modal-voreinstellungen-inhalt-hintergrundfarbe-container-uberschrift {
    margin-bottom: 5px;
    text-align: center;
}

#modal-voreinstellungen-inhalt-buttons {
    margin-top: 10px;
    text-align: center;
    word-spacing: 50px;
}

#modal-okay, #modal-abbruch, #formular-abschicken {
    width: 120px;
}

#modal-abbruch {
    border: 4px solid black;
}

#modal-okay:active, #modal-abbruch:active, #formular-abschicken:active {
    background-color: black;
    color: white;
}

#tabelle-dienste {
    width: 90%;
    margin: 0 auto;
    border: 2px solid silver;
    border-spacing: 5px;
    padding: 3px;
}

.tabelle-dienste-kategorie {
    border: 2px solid silver;
    padding: 5px;
    vertical-align: top;
    background-image: radial-gradient(lightgray 1px, transparent 0);
    background-size: 3px 3px;
    font-family: "Atari ST";
    font-size: 13pt;
    text-transform: uppercase;
    text-align: center;
}

.tabelle-dienste-diensticon {
    width: 120px;
    border: 2px solid silver;
    padding: 5px;
    text-align: center;
    vertical-align: top;
}

.tabelle-dienste-dienstbeschreibung {
    border: 2px solid silver;
    padding: 5px;
    text-align: left;
    vertical-align: top;
}

/*
    FEHLERSEITEN
*/

.fehlercontainerinnen {
    margin: 0 auto;
    padding-top: 30px;
    text-align: center;
}

.mistfliege {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fehlertext {
    font-family: "Atari ST";
    font-size: 24px;
    margin-top: 12px;
    margin-bottom: 0;
}

/*
    BENUTZERPORTAL
*/
#benutzerportal-container {
    padding-top: 30px;
}

.benutzerportal-container-zeile {
    width: 100%;
    text-align: center;
}

.benutzerportal-container-element {
    display: inline-block;
    justify-content: center;
    width: 200px;
    height: 200px;
    text-align: center;
    font-family: "Atari ST";
    font-size: 24px;
}

.benutzerportal-container-element img {
    width: 128px;
    height: 128px;
}

.benutzerportal-container-element:hover {
    background-color: black;
    color: white;
}

.benutzerportal-container-element:hover img {
    filter: invert(100%); 
    -webkit-filter:invert(100%); 
}

/*
    BENUTZERSITZUNGEN
*/
#tabelle-benutzersitzungen {
    width: 900px;
    margin: 0 auto;
    border: 2px solid silver;
    border-spacing: 5px;
    padding: 3px;
}

#tabelle-benutzersitzungen thead th {
    border: 2px solid silver;
    padding: 5px;
    vertical-align: top;
    background-image: radial-gradient(lightgray 1px, transparent 0);
    background-size: 3px 3px;
    font-family: "Atari ST";
    font-size: 13pt;
    text-transform: uppercase;
}

#tabelle-benutzersitzungen thead th:nth-of-type(1) {
    width: 200px;
    text-align: center;
}

#tabelle-benutzersitzungen thead th:nth-of-type(2) {
    width: 350px;
    text-align: left;
}

#tabelle-benutzersitzungen thead th:nth-of-type(3) {
    width: 350px;
    text-align: left;
}

#tabelle-benutzersitzungen tbody td {
    border: 2px solid silver;
    padding: 5px;
}

#tabelle-benutzersitzungen tbody td:nth-of-type(1) {
    text-align: center;
}

#tabelle-benutzersitzungen tbody td:nth-of-type(2) {
    text-align: left;
    white-space: nowrap;
}

#tabelle-benutzersitzungen tbody td:nth-of-type(2) img {
    vertical-align: middle;
}

#NeuenDienstHinzufuegen label {
    width: 250px;
}

#Tabelle-Dienste {
    width: 900px;
    margin: 0 auto;
    border: 2px solid silver;
    border-spacing: 5px;
    padding: 3px;
}

#Tabelle-Dienste thead th {
    border: 2px solid silver;
    padding: 5px;
    vertical-align: top;
    background-image: radial-gradient(lightgray 1px, transparent 0);
    background-size: 3px 3px;
    font-family: "Atari ST";
    font-size: 13pt;
    text-transform: uppercase;
}

#Tabelle-Dienste thead th:nth-of-type(1) {
    width: 500px;
    text-align: left;
}

#Tabelle-Dienste thead th:nth-of-type(2) {
    width: 200px;
    text-align: center;
}

#Tabelle-Dienste thead th:nth-of-type(3) {
    width: 200px;
    text-align: center;
}

#Tabelle-Dienste tbody td {
    line-height: 20px;
}

#Tabelle-Dienste tbody td:nth-of-type(1) {
    text-align: left;
}

#Tabelle-Dienste tbody td:nth-of-type(2) {
    text-align: center;
}

#Tabelle-Dienste tbody td:nth-of-type(3) {
    text-align: center;
}

#Tabelle-Dienste tbody td:nth-of-type(3) img {
    margin: 0 3px 0 3px;
}