/*
Alle Werkzeug-Stile, die nicht die Standard-Elemente oder die Organisationsstruktur direkt beeinflussen, sondern variabel und bei Bedarf bestimmte semantisch defnierte Eigentschaften hinzufügen.
*/

/* Make images easier to work with */
.easyimg {
    /* classic version
	max-width: 100%;
	display: block;
	*/

    max-height: 100%;
    height: auto;
    vertical-align: middle;
    text-align: center;
    /* font style if images do not load, then alt-text is displayed differently */
    font-style: italic;
    /* for preloaded low-res images --> inline style background in html img */
    /* include width and height on html img as aspect ratio (no px) */
    background-repeat: no-repeat;
    background-size: cover;
    /* in case the image has a float */
    shape-margin: 0.75rem;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 999;
}

/* Responsive Texte für unterschiedliche Schriftgrößen auf normalen Bildschirmen, aber nicht auf kleinen mobilen Bildschirmen*/
.text-xxl {
    font-size: 2.5rem;
    font-size: clamp(1.9rem, calc(1.9rem + ((1vw - 0.22rem) * 0.2941)), 2.5rem);
    min-height: 0vw;
}
.text-xl {
    font-size: 1.9rem;
    font-size: clamp(1.7rem, calc(1.7rem + ((1vw - 0.22rem) * 0.2941)), 1.9rem);
    min-height: 0vw;
}
.text-l {
    font-size: 1.6rem;
    font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.22rem) * 0.2941)), 1.6rem);
    min-height: 0vw;
}
.text-m {
    font-size: 1.3rem;
    font-size: clamp(1.1rem, calc(1.1rem + ((1vw - 0.22rem) * 0.2941)), 1.3rem);
    min-height: 0vw;
}
.text-s {
    font-size: 0.8rem;
}


/* Textstile */

.text-fett {
    font-weight: 600;
}

.text-sup {
    vertical-align: super;
    font-size: 0.7em;
}

.text-sub {
    vertical-align: sub;
    font-size: 0.7em;
}

span .text-dark {
    color: var(--textcolor-dark);
}

text-links {
    text-align: left;
}

text-center {
    text-align: center;
}

/* Abstände zwischen Elementen */

.abstand-o-xxl {
    margin: 4rem 0rem 0rem 0rem;
}
.abstand-o-xl {
    margin: 3rem 0rem 0rem 0rem;
}
.abstand-o-l {
    margin: 2rem 0rem 0rem 0rem;
}
.abstand-o-m {
    margin: 1.5rem 0rem 0rem 0rem;
}
.abstand-o-s {
    margin: 1rem 0rem 0rem 0rem;
}

.abstand-u-xxl {
    margin: 0rem 0rem 4rem 0rem;
}
.abstand-u-xl {
    margin: 0rem 0rem 3rem 0rem;
}
.abstand-u-l {
    margin: 0rem 0rem 2rem 0rem;
}
.abstand-u-m {
    margin: 0rem 0rem 1.5rem 0rem;
}
.abstand-u-s {
    margin: 0rem 0rem 1rem 0rem;
}

.abstand-ou-xxl {
    margin: 4rem 0rem 4rem 0rem;
}
.abstand-ou-xl {
    margin: 3rem 0rem 3rem 0rem;
}
.abstand-ou-l {
    margin: 2rem 0rem 2rem 0rem;
}
.abstand-ou-m {
    margin: 1.5rem 0rem 1.5rem 0rem;
}
.abstand-ou-s {
    margin: 1rem 0rem 1rem 0rem;
}

/* Innere Räume rundum */

.nopadding {
    padding: 0px;
}
.padding-ourl-xxl {
    padding: calc(var(--padding-base) * 4);
}
.padding-ourl-xl {
    padding: calc(var(--padding-base) * 3);
}
.padding-ourl-l {
    padding: calc(var(--padding-base) * 2);
}
.padding-ourl-m {
    padding: calc(var(--padding-base) * 1);
}
.padding-ourl-s {
    padding: calc(var(--padding-base) * 0.5);
}

/* Innere Räume rechts, links und unten */

.padding-url-xxl {
    padding: calc(var(--padding-base) * 4) 0 calc(var(--padding-base) * 4) 0;
}
.padding-url-xl {
    padding: calc(var(--padding-base) * 3) 0 calc(var(--padding-base) * 3) 0;
}
.padding-url-l {
    padding: calc(var(--padding-base) * 2) 0 calc(var(--padding-base) * 2) 0;
}
.padding-url-m {
    padding: calc(var(--padding-base) * 1) 0 calc(var(--padding-base) * 1) 0;
}
.padding-url-s {
    padding: calc(var(--padding-base) * 0.5) 0 calc(var(--padding-base) * 0.5) 0;
}

/* Innere Räume oben und unten */

.padding-ou-xxl {
    padding: calc(var(--padding-base) * 4) 0 calc(var(--padding-base) * 4) 0;
}
.padding-ou-xl {
    padding: calc(var(--padding-base) * 3) 0 calc(var(--padding-base) * 3) 0;
}
.padding-ou-l {
    padding: calc(var(--padding-base) * 2) 0 calc(var(--padding-base) * 2) 0;
}
.padding-ou-m {
    padding: calc(var(--padding-base) * 1) 0 calc(var(--padding-base) * 1) 0;
}
.padding-ou-s {
    padding: calc(var(--padding-base) * 0.5) 0 calc(var(--padding-base) * 0.5) 0;
}

/*********************************/
/* Innere Räume links und rechts */
/*********************************/

.padding-rl-xxl {
    padding: 0 calc(var(--padding-base) * 4) 0 calc(var(--padding-base) * 4);
}
.padding-rl-xl {
    padding: 0 calc(var(--padding-base) * 3) 0 calc(var(--padding-base) * 3);
}
.padding-rl-l {
    padding: 0 calc(var(--padding-base) * 2) 0 calc(var(--padding-base) * 2);
}
.padding-rl-m {
    padding: 0 calc(var(--padding-base) * 1) 0 calc(var(--padding-base) * 1);
}
.padding-rl-s {
    padding: 0 calc(var(--padding-base) * 0.5) 0 calc(var(--padding-base) * 0.5);
}

/********/
/* Flex */
/********/

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-grow {
    flex-grow: 1;
}

.flex-unten {
    align-items: flex-end;
}

.flex-center {
    align-items: center;
}

.flow > * + * {
    margin-top: var(--flow-space);
}

.zentrieren {
    display: grid;
    place-items: center;
}

.links-zentrieren {
    display: grid;
    place-items: center;
}

/* Grid */

.grid-footer {
    display: grid;
    gap: 4rem;
    grid-template-columns: repeat(2, 1fr);
}

.grid-colspan-2 {
    grid-column: span 2;
}

/* Utility-HÖHE */

.min-height-600 {
    min-height: 37.5rem;
}

.min-height-500 {
    min-height: 31.25rem;
}

.min-height-400 {
    min-height: 25rem;
}

.min-height-300 {
    min-height: 18.75rem;
}

/* Formatierungen für Gesetzestexte */

.indent-s {
    padding-left: 2rem;
}

.indent-m {
    padding-left: 3rem;
}

.indent-l {
    padding-left: 4rem;
}