/* #region === Imported font-families === */
@font-face {
    font-family: 'pica';
    src: url(src/fonts/pica.woff2) format('woff2');
    src: url(src/fonts/pica.ttf) format('ttf');
    font-weight: normal;
    font-style: normal;
}
/* #endregion */

/* #region === General styling === */
* {
    box-sizing: border-box;
}

html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 16px;
    color: var(--font-color-dark);
    background-color: #FFFFFF;
    /* trying to place the footer at the bottom of the screen -> DEELET if not necessary anymore */
    min-height: 100%;
    hyphens: auto;
}

body {
    margin: 0;
}

.no-wrap {
    white-space: nowrap;
}
/* XXX Max content width has to be set to useful value later on (after implementation of @media querry) XXX */
#content {
    max-width: 500px;
    margin: auto;
    background-color: var(--background-light);
}

.marquee {
    font-family: 'pica';
    background-color: var(--highlight-one);
    color: var(--font-color-dark);
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    padding: 0.2rem;
}

.marquee p {
    margin-top: 0;
    display: inline-block;
    animation: marquee 15s linear infinite;
    font-size: 1rem;
}

.marquee p:hover {
    animation-play-state: paused;
    cursor: grabbing;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
/* #endregion */

/* #region === Header H1-H6 Styling */
h3 {
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
/* #endregion */

/* #region === Header Box === */
#topNav {
    display: none;
    padding: 0 1rem;
}

#logoNameNav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--background-dark);
    color: var(--background-light);
    padding: 0 1rem;
    height: 68px;
}

.headerText {
    display: inline-block;
    text-align: center;
    padding: 0 1rem;
}

.headerTextBox {
    flex: 1;
    text-align: center;
}

.menuIconBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    cursor: pointer;
}

.menuIcon {
    width: 100%;
    height: 4px;
    background-color: var(--background-light);
    margin: 3px 0;
    border-radius: 3px;
}
/* #endregion */

/* #region === Main Conten === */
.main-content-box {
    padding: 1rem;
}

section {
    width: 100%;
    height: auto;
    background-color: var(--background-box);
    box-shadow: 8px 8px 4px var(--box-shadow);
    border-radius: 3px;
    padding: 1rem;
    margin: 1.5rem 0;
}

p {
    margin-bottom: 0;
}

section:first-child {
    margin-top: 0;
}

section:last-child {
    margin-bottom: 0;
}

.header2-content-box {
    font-size: 1.1rem;
    margin-top: 0;
    text-align: center;
}

.img-content-box {
    width: 100%;
    height: auto;
    margin-top: 1rem;
    border-radius: 3px;
}

figure {
    margin: 1rem 0;
    width: 100%;
}

figure .img-content-box {
    border-radius: 3px 3px 0 0;
    margin: 0;
    display: block;
}

figcaption {
    background-color: var(--figcaption);
    color: var(--font-color-dark);
    border-radius: 0 0 3px 3px;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    text-align: left;
    hyphens: manual;
}

h1 {
    font-size: 1rem;
}
/* #endregion */

/* #region === Link Styling === */
a {
    text-decoration: none;
    text-justify: none;
    color: var(--link-color);
}


#logo-link {
    margin: 0;
    padding: 0;
}


header nav a {
    margin: 0.05rem 0;
    float: left;
    width: 100%;
    border: solid 1px var(--off-black);
    border-radius: 3px;
    padding: 4px;
    text-align: center;
    background-color: var(--background-dark);
    color: var(--background-light);
    font-size: 0.95rem;
}

header nav a:first-child {
    margin-top: 0.1rem;
}

.active {
    background-color: var(--background-dark);
}

header a:hover {
    cursor: pointer;
    background-color: var(--background-box);
    color: var(--background-dark);
}

header li:hover {
    background-color: var(--background-box);
}

a:active {
    cursor: grabbing;
}

.link-standalone {
    margin: 1.2rem 0;
    align-content: center;
}

.link-standalone a {
    color: var(--background-dark);
}

.link-standalone:hover {
    text-decoration: underline;
}
/* #endregion */

/* #region === Button Styling === */
button {
    color: var(--font-color-light);
    background-color: var(--buttons);
    border: none;
    padding: 0.7rem;
    border-radius: 3px;
    display: block;
    margin: 1rem auto 0 auto;
    font-size: 0.95rem;
}

button:hover {
    cursor: pointer;
}
/* #endregion */

/* #region === Table Styling === */
table {
    border-collapse: collapse;
    width: 100%;
}

table, th, td {
    border: 1px solid var(--off-black);
}

.currency {
    text-align: right;
}
/* #endregion */

/* #region === Forms Styling === */
input textarea {
    font-size: 16px;
}
/* #endregion */

/* #region === Miscellaneous === */
.hinweis-box {
    text-align: center;
    border: solid 5px var(--highlight-two);
    margin-bottom: 1rem;
    border-radius: 3px;
    background-color: var(--background-light);
    padding: 1rem;
}

.hinweis-box > p {
    margin-bottom: 0;
}

section .hinweis-box {
    margin-bottom: 0;
    border-width: 3px;
    background-color: var(--background-light);
}

.content-box > h3 {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 0.7rem;
}

.center-text-box {
    max-width: fit-content;
    margin: auto;
    font-size: 0.95rem;
}

.center-text-content {
    max-width: fit-content;
    margin: auto;
    text-align: center;
    font-size: 0.95rem;
}

.paragraph-divider {
    border: solid 1px var(--hr-dark);
    margin: 1.5rem 0;
}

.icons {
    width: 0.95rem;
    height: auto;
    margin: auto 0.5rem;
    vertical-align: baseline;
}
/* #endregion */

/* #region === Footer Area === */
footer {
    min-height: 4rem;
    color: var(--font-color-light);
    background-color: var(--background-dark);
    justify-content: center;
    padding: 1rem;
}

.footerText {
    text-align: center;
}

.footer-link-box {
    /*background-color: blue;*/
    margin-top: 1rem;
    text-align: center;
}

footer a {
    margin: 0 1rem;
    font-size: 0.8rem;
    hyphens: none;
    color: var(--font-color-light);
}

footer a:hover {
    text-decoration: underline;
    cursor: pointer;
}

#footer-optional {
    text-align: justify;
}
/* #endregion */

/* #region === Colors === */
:root {
    --background-light: #fefefb;
    --background-dark: #33382f;
    --background-box: #eef1eb;
    --box-shadow: #d6d8d3;
    /* --background-box: #adbc9f; "Referenzfarbe für Abstufungen" */
    --buttons: #9ba98f;
    --off-black: #11120f;
    --figcaption: #b5c2a8;
    --font-color-light: #fefefb;
    --font-color-dark: #11120f;
    --highlight-one: #ff9d00;
/*    --highlight-one: #deaf4a;*/
    --highlight-two: #e76b3e;
    --hr-light: #cdd6c5;
    --hr-dark: #79836f;
    --link-color: #67705f;
};

/*
Link was used for the old colors -> Still worth to have a look
https://www.color-hex.com/color/ffff99
*/
/* #endregion */