@charset "UTF-8";

/* =========================
   Root / Variablen
========================= */
:root 
{
    --container-bg-color:#0f172a;
}

/* =========================
   USER LOGO TEXT BOX
========================= */

.bild-box-user-logo 
{
    position:    relative;
    display: inline-block;
    margin-left:      1em;
    margin-right:   1.5em;
}

.bild-box-user-logo img 
{
    display:  block;
    width:    130px; /*100%*/
    height:    auto;
}

.bild-text-user-logo 
{
    /*
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    */
    position: absolute;
    bottom:        0px;
    left:          50%;
    transform: translateX(-50%);
    color:     white;
    font-size:    11px;
    font-weight:  bold;
    background: rgba(0, 0, 0, 0.6);
    padding:  8px 12px;
    border-radius: 8px;

    width:         100%;
    border-style: solid;
    border-color: #FFFFFF;
    border-width: thin;
}

/* =========================
   Allgemeiner Inhalt
========================= */
.container-zentriert-border
{
    display:           flex;
    flex-direction:     row;
    flex-wrap:         wrap;
    justify-content: center;
    align-items:     center;

    margin-left:        3em;
    margin-right:       3em;
    margin-top:         1em;
    margin-bottom:      1em;

    padding-top:        2em;
    padding-bottom:     2em;
    padding-left:       1em;
    padding-right:      1em;

    border-style:     solid;
    border-width:      thin;
    border-color: #FFFFFF;
    border-radius:     20px;
    background-color: transparent;
}

.container-inhalt-zentrieren-ohne-bg
{
    display:           flex;
    justify-content: center;
    align-items:     center;

    padding-top:        2em;
    padding-bottom:     2em;
    padding-left:       1em;
    padding-right:      1em;

    margin-left:        3em;
    margin-right:       3em;
    margin-top:         1em;
    margin-bottom:      1em;
}

.container-text-box
{
    display:           flex;
    justify-content:   left;
    align-items:       left;

    margin-left:        3em;
    margin-right:       3em;
    margin-top:         2em;
    margin-bottom:      0em;
}

/* =========================
   Textbasierter Inhalt
========================= */
article.zentriert
{
    display:           flex;
    flex-direction:     row;
    flex-wrap:         wrap;
    justify-content: center;
    align-items:     center;

    margin-left:        3em;
    margin-right:       3em;
    margin-top:         1em;
    margin-bottom:      1em;
}

section
{
    display:           flex;
    justify-content:   left;
    align-items:       left;

    margin-left:        3em;
    margin-right:       3em;
    margin-top:         2em;
    margin-bottom:      0em;
}

/* =========================
   Fieldset
========================= */

fieldset {
    width: 80%;
    border: 2px solid #FFFFFF;
    border-radius: 20px;
    padding: 24px;
    margin: 20px 0;
    background: rgba(255, 255, 255, 0.04);
}

legend {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0 14px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    letter-spacing: 0.5px;
}

/* =========================
   Mobile Geräte
========================= */
@media (max-width: 768px)
{
    .container-zentriert-border
    {
        margin: 1em 1em;
        padding: 1.2em 0.8em;
        border-radius: 14px;
    }

    .container-inhalt-zentrieren-ohne-bg
    {
        padding: 1.2em 0.8em;
    }

    .container-text-box
    {
        margin: 1em 1em 0 1em;
        flex-direction: column;
    }

    article.zentriert
    {
        margin: 1em 1em;
        flex-direction: column;
        text-align: center;
    }

    section
    {
        margin: 1em 1em 0 1em;
        flex-direction: column;
    }
}