/* Diese Datei ist das Äquivalent zum Impressum und zum Datenschutzerklärungsbereich
auf der Desktopansicht */

.rechtliches
{
    scroll-margin-top: var(--scroll-margin-top);
    width: var(--breite-contentContainerElement);

    padding: 1rem;
}

.rechtliches .textExpand
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding-top: 0.55rem;
    padding-bottom: 0.55rem;

    color: var(--weiß);
    background-color: var(--blau-gradient);

    border-radius: 1rem;
    /*border-top: 1px solid var(--grau);*/
}

.rechtliches .textExpand.open
{
    /*background-color: var(--blau-gradient);*/
}

.rechtliches .textExpand:first-of-type
{
    margin-top: 2.4rem;
}

.rechtliches .textExpand.impressum.closed
{
    margin-bottom: 1.2rem;
}

/* Dem letzten textExpand eine bottom-border geben - aber nur, wenn dieses
geschlossen ist. Das zuständige java script vergibt hierfür die klassen closed
und open.

Muss manuell geändert werden, sobald das letzte Element nicht mehr die
datenschutzerklärung ist */
.rechtliches .textExpand.datenschutzerklärung.closed
{
    /*border-bottom: 1px solid var(--grau);*/

    margin-bottom: 1.2rem;
}

.rechtliches .textExpand h2
{
    margin: 0;

    margin-left: 1.2rem;

    font-size: 22px;
    font-weight: 700;
}

.rechtliches .textExpand p
{
    margin: 0;
}

.rechtliches .textExpand .arrowBackground
{
    background-color: rgba(51, 51, 51, 0.25);

    --radius: 28px;
    border-radius: 50%; /* 50% => rechteck wird rund */
    width: var(--radius);
    height: var(--radius);

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 2.5rem;
}

.rechtliches .textExpand .arrow
{
    border: solid var(--weiß);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;

    /*margin-right: 0.3rem;*/
    margin-right: 2.5rem;
}

.rechtliches .textExpand .right
{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.rechtliches .textExpand .down
{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.rechtliches .textExpandContent
{
   display: none;
}

/* .show wird über js an .mobileContent Element angehängt. .x.y trifft in CSS alle Elemente, die Klasse
x haben und zusätzlich noch die Klasse y besitzen */
.rechtliches .textExpandContent.show
{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    margin-bottom: 2.5rem;
}

.rechtliches .textExpandContent.show h2
{
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.rechtliches .textExpandContent.show p
{
    padding: 4px 8px;

    margin: 0;
}

.rechtliches .textExpandContent.show .datenschutzerklärung
{
    margin-top: 0.8rem;
}

.rechtliches .textExpandContent.show .autor
{
    margin-top: 0.8rem;
}