:root {
    /* Klassische Pride-Farben */
    --color-orange: #f46b23;
    --color-yellow: #F7D148;
    --color-green: color(display-p3 0.268 0.6 0.635);
    --color-trans-blue: #5BCEFA;
    --color-trans-pink: #F5A9B8;
    --color-white: #FFFFFF;
    --color-intersex-yellow: #FFD800;
    --color-secondary:#000 ;
    --color-black: #000;
    --color-black-light: rgba(0, 0, 0, 0.446);
    --color-text: #3d8a91;
    --secondary-font-family: 'BerlinType', Arial,Helvetica, sans-serif;
    --primary-font-family: 'BerlinType', Arial,Helvetica, sans-serif;
}
body.no-scroll {
    overflow: hidden;
    max-height: 100vh;
}
html, body {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    font-family: var(--primary-font-family);
    overflow-x: hidden;
    font-weight: normal;
    line-height: 1.2;
    color: var(--color-text);
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }
  @media (min-width: 340px) {
    body {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 12px;
    }
}
  p, section ul li, section ol li {
    font-family: var(--primary-font-family);
    font-weight: normal;
    line-height: 1.4em;
    font-size: 1.2rem;
  }
.bg-black {
    background-color: var(--color-black);
    border-radius: 8px;
    padding-top: 12px;
}

.bg-orange {
    background-color: var(--color-orange);
    border-radius: 8px;
    padding-top: 12px;
}
.bg-yellow {
    background-color: var(--color-yellow);
    border-radius: 8px;
    padding-top: 12px;
}
.bg-green {
    background-color: var(--color-green);
    border-radius: 8px;
    padding-top: 12px;
}
.bg-white {
    background-color: var(--color-white);
    border-radius: 8px;
    padding-top: 12px;
}
.bg-red {
    background-color: var(--color-red);
    border-radius: 8px;
    padding-top: 12px;
}

.bg-orange,.bg-orange a,.bg-orange p,.bg-orange ul,
.bg-green,.bg-green a,.bg-green p,.bg-green ul {
    color: #ffffff;
}
.bg-yellow,.bg-yellow a,
.bg-trans-white,.bg-trans-white a {
    color: #000000;
}
.color-orange {
    color: var(--color-orange);
}
.color-yellow {
    color: var(--color-yellow);
}
.color-green {
    color: var(--color-green);
}
.color-white, .color-white a {
    color: var(--color-white);
}
/* sonstige */
.color-black, .color-black a {
    color: var(--color-black);
}
.color-black-light, .color-black-light a {
    color: var(--color-black-light);
}
.container-fluid.max {
    max-width: 1140px;
}
.container-fluid.max-card {
    max-width: 1168px;
}
.container-fluid.full {
    width: 100vw;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}

figure picture img {
    width: 100%;
    height: auto;
}
figcaption {
    font-size: 0.9em;
    color: var(--color-black-light);
    padding: 4px 0 4px 0;
}
blockquote {
    padding: 0 10vw 0 10vw;
}
blockquote {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    padding: 0 10vw 0 0;
    display: inline-block;
    white-space: no-wrap;
}
blockquote p {
    white-space: no-wrap;
    display: inline;
    color: white;
    padding: 8px;
    font-size: 1.2rem;
    line-height: 3rem;
    background: #81B92F none repeat scroll 0% 0%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
blockquote p::after {
    content: '“';
    display: inline;
    white-space: nowrap;
    font-size: 1.3rem;
}
blockquote p::before {
    content: '„';
    display: inline;
    white-space: nowrap;
    font-size: 1.3rem;
}
.bg-green blockquote p,
.bg-orange blockquote p {
    color: black;
    padding: 8px;
    background: var(--color-white);
}


.text-columns {
    column-count: 1;
    column-gap: 2rem;
    hyphens: auto;
    /* Silbentrennung aktivieren */
    widows: 2;
    /* Mind. 2 Zeilen am Spaltenende */
    orphans: 2;
}
.text-columns ul li {
 font-size: 1.2rem;
 line-height: 1.4em;
}
@media (min-width: 767px) {
    .text-columns {
        column-count: 2;
    }
    .text-columns ul {
        column-count: 2;   /* oder: initial */
    column-gap: 2rem;
    width: 200%;
    padding-bottom: 1em;
    }
}
.text-columns p,
.text-columns h1,
.text-columns h2,
.text-columns h3,
.text-columns ul,
.text-columns ol,
.text-columns li {
    break-inside: avoid;
    page-break-inside: avoid;
}
footer {
    padding-top: 24px;
    padding-bottom: 24px;
}
footer a {
    font-family: var(--color-white);
}

footer .nav-link {
    font-size: 1.2rem;
}

body.contrast-high,
body.contrast-high .bg-black,
body.contrast-high .bg-orange,
body.contrast-high .bg-yellow,
body.contrast-high .bg-green,
body.contrast-high .bg-white,
body.contrast-high .bg-red,
body.contrast-high .container-fluid,
body.contrast-high .card-title,
body.contrast-high .card-title span,
body.contrast-high .card-title p,
body.contrast-high .card div.bodytext.color-black p,
body.contrast-high .card div.bodytext.color-white p,
body.contrast-high .card div.bodytext.color-blau p,
body.contrast-high .card div.bodytext.color-orange p,
body.contrast-high .card-title.color-black span,
body.contrast-high .card-title.color-white span,
body.contrast-high .card-title.color-orange span,
body.contrast-high .card span.color-black,
body.contrast-high .card span.color-white,
body.contrast-high .card span.color-orange,
body.contrast-high .card i.icon.color-orange,
body.contrast-high .card i.icon.color-black,
body.contrast-high .card i.icon.color-white {
    background-color: var(--color-black)!important;
    color: white!important;
}
body.text-increased-1 {
    font-size: 20px;
}
body.text-increased-1 p,
body.text-increased-1 h1,
body.text-increased-1 h2,
body.text-increased-1 h3,
body.text-increased-1 h4,
body.text-increased-1 section ul li,
body.text-increased-1 section ol li,
body.text-increased-1 footer .nav-link {
    zoom: 1.1;
}
body.text-increased-2 {
    font-size: 24px;
}
body.text-increased-2 p,
body.text-increased-2 h1,
body.text-increased-2 h2,
body.text-increased-2 h3,
body.text-increased-2 h4,
body.text-increased-2 section ul li,
body.text-increased-2 section ol li,
body.text-increased-2 footer .nav-link {
    zoom: 1.3;
}