/*** Definition von Farbwerten und Schriftstärken mit Aliasen ***/
:root {
    /* Hintergrundfarben */
    --cXXDark: #121921;
    --cXDark: #482f08;
    --cDark: #f59200;
    --cMedium: #ffd391;
    --cBright: #ffeed6;
    --cXBright: #fffbd9;
    --cGMedium: #808080;
    --cWhTrans: rgba(255, 255, 255, 0.75);
    /* zusätzliche Schriftfarben zur Hervorhebung; teiltransparent und pastell 
    */
    --fcBlue: rgba(148, 148, 255, 0.75);
    --fcGreen: rgba(14, 227, 14, 0.75);
    --fcPurple: rgba(254, 0, 254, 0.75);
    /* Bildrahmen-Farben */
    --cPfLeftTop: #ffffff;
    --cPfRightBottom: #cdcdcd;
    /* Schriftgrößen */
    --fsXLarge: 18pt;
    --fsLarge: 16pt;
    --fsMedium: 14pt;
    --fsSmall: 12pt;
    --fsXSmall: 10pt;
    --fsXXSmall: 8pt;
    /* Abstände */
    --dstXSmall: 2px;
    --dstSmall: 5px;
    --dstMedium: 10px;
    --dstLarge: 15px;
    --dstXLarge: 20px;
}

/*** Dokumentabschnitte und Überschriften ***/

body {
    font-family: Helvetica, Lucida, Verdana, sans-serif;
    margin: 0;
    font-size: var(--fsSmall);
    color: var(--cXXDark);
    background-color: var(--cDark);
}
/* Konfiguration; dient nur zur Klassifizierung der Einträge */
.cfgNewsText {
    display: none;
}

/** Divider (Layer) **/

div {
    border-radius: 5px;
}

/* noscript */
.noscript {
    z-index: 7;
    width: 100%;
    height: 75%;
    position: sticky;
    top: 15px;
    background-color: var(--cXBright);
}

/* floating */
.float {
    display: none;
    position: fixed;
    float: left;
}
/* absolute */
.absolute {
    background-color: white;
    position: absolute;
    left: 10px;
    top: 80px;
    padding: 10px;
    border: 3px solid var(--cGMedium);
    opacity: 0.5;
}

/*** Spalten und Zeilen ***/
/* rows wird nicht benutzt, da Standardverhalten eines div */
.rows {
    display: flex;
    flex-direction: column;
    float: left;
    width: auto;
    flex-wrap: nowrap;
}
/** Spalten-Satz **/
.columns {
    display: flex;
    flex-direction: row;
    margin: var(--dstSmall);
    width: inherit;
}

/* Vorlagen und Konfigurationen; nicht sichtbar */
.template,
.config {
    display: none;
    position: absolute;
    top: var(--dstXLarge);
    left: var(--dstXLarge);
    z-index: -5;
}

/* Überschriften */
h1,
h2,
h3,
h4 {
    font-weight: bold;
}

h1 {
    margin: 0 10 0 10;
    font-size: var(--fsXLarge);
    color: var(--cXDark);
}

h2 {
    margin: 15 5 0 5;
    font-size: var(--fsLarge);
    color: var(--cDark);
}

.hMenu {
    margin: 0;
}

h3 {
    margin: 20 3 0 3;
    font-size: var(--fsSmall);
    color: var(--cMedium);
    text-indent: 25px;
}

h4 {
    text-indent: 35px;
    font-size: var(--fsXSmall);
    color: var(--cGMedium);
}

.staff {
    text-align: left;
    font-weight: bold;
}

.personal {
    font-style: italic;
}

/*** Picture Frames ***/
.pictureFrame {
    margin: 0 auto;
    display: block;
    padding: var(--dstSmall);
    align-content: center;
    justify-content: center;
}

/* Galerie (Anordnung im Raster) */
.fGrid {
    display: grid;
}

/* Relative Laufweite */
.w65 {
    width: 65%;
}
.w50 {
    width: 50%;
}
.w33 {
    width: 33%;
}

.main {
    display: grid;
}

.chapter {
    background-color: var(--cBright);
    margin-left: var(--dstXLarge);
    margin-top: var(--dstMedium);
    padding: var(--dstLarge);
    width: inherit;
}

.dMenu {
    position: absolute;
    width: fit-content;
    z-index: 3;
    margin-left: var(--dstMedium);
    background-color: var(--cXBright);
    font-size: var(--fsXSmall);
}

.articlewrapper {
    margin: 10px;
    z-index: 2;
    background-color: var(--cXBright);
    overflow-y: scroll;
    height: unset;
}

.articlearea {
    padding: 10px;
}

.navigator {
    margin: 0;
}

.footer {
    width: auto;
    margin: 10px;
    padding: 3px;
    background-color: var(--cXBright);
}

.copyright {
    margin: 5px;
    text-align: right;
    font-size: var(--fsXXSmall);
}
/* Divider für Newsbox */
.newsTicker {
    margin: 0 10px 0 10px;
    padding-bottom: 5px;
    height: 15pt;
    background-color: var(--cXBright);
}
/* Absatz für Infos */
marquee,
#pNews {
    line-height: 15pt;
    font-size: var(--fsXSmall);
    color: var(--cDark);
    font-weight: bold;
}
marquee {
    width: auto;
    margin-left: 175px;
    margin-right: 100px;
}
#pNews {
    width: inherit;
    margin-bottom: var(--dstSmall);
    text-align: center;
}
/* Stilklassen für Übergang der Sichtbarkeit */
.show {
    opacity: 1;
    transition: opacity 1s ease-in;
}
.hide {
    opacity: 0;
    transition: opacity 1s ease-out;
}

/** Absätze **/

.pictureTitle {
    margin-top: 5px;
    text-align: center;
    font-size: var(--fsXXSmall);
}

.note {
    color: red;
}

/*** Header ***/

.rAligned {
    text-align: right;
}

/* Listen */

ul li {
    margin: 0 0 0 5px;
    padding: 0;
    list-style-type: disc;
}

ul li li {
    list-style-type: circle;
}

ol li {
    list-style-type: decimal;
}

nav {
    background-color: var(--cMedium);
    border-radius: 5px;
    padding-top: var(--dstSmall);
    padding-bottom: var(--dstSmall);
}

nav li {
    list-style-type: none;
    padding: 1px;
    margin-left: var(--dstLarge);
    margin-top: 0;
    padding-right: var(--dstSmall);
    margin-right: 5px;
    background-color: var(--cBright);
    border-radius: 3px;
    border-color: var(--cXBright);
    border-style: outset;
}

nav li li {
    list-style-type: none;
}

nav ul {
    display: inline;
    white-space: nowrap;
}

.ref,
.folder {
    cursor: pointer;
    border-radius: 5px;
}

.clean li {
    list-style-type: none;
}

/*** Grafiken ***/

img {
    display: block;
    margin: auto;
    width: inherit;
    border-left-style: solid;
    border-left-color: var(--cPfLeftTop);
    border-top-style: solid;
    border-top-color: var(--cPfLeftTop);
    border-right-style: outset;
    border-right-color: var(--cPfRightBottom);
    border-bottom-style: outset;
    border-bottom-color: var(--cPfRightBottom);
}

.fullscreen {
    margin: 0;
    width: 100%;
    border: none;
}

.portrait {
    margin-left: 20px;
    margin-right: 20px;
}

.header {
    width: 100%;
    background: no-repeat;
    flex-wrap: nowrap;
    margin: 0 0 20px 0;
    padding: 0;
}

.Karte {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.icon,
.iconExtRef {
    display: inline;
}

.icon {
    border: none;
    height: 10pt;
    margin: 0 5px 0 0;
}

.iconExtRef {
    height: 12pt;
}

#menuSwitch {
    cursor: pointer;
    border: none;
}

/* Videos */

video {
    width: 90%;
}

/* Text-Markup */

.initial {
    text-decoration: underline;
}

.highlight {
    font-weight: bold;
}

.blue,
.green,
.purple {
    text-align: center;
    font-size: var(--fsMedium);
    font-weight: bold;
    background-color: var(--cWhTrans);
}
.blue {
    color: var(--fcBlue);
}
.green {
    color: var(--fcGreen);
}
.purple {
    color: var(--fcPurple);
}

/* LINKS */
a {
    text-decoration: underline;
    cursor: pointer;
    color: black;
}

.xtRef {
    cursor: pointer;
    font-weight: bold;
}