@charset "UTF-8";

/* =====  1 Global Rules & Definitions  ===================================== */

/* -----  1.1 Font Definitions  --------------------------------------------- */

@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; src: url('fonts/ubuntu-v13-latin-regular.eot'); src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url('fonts/ubuntu-v13-latin-regular.eot?#iefix') format('embedded-opentype'), url('fonts/ubuntu-v13-latin-regular.woff2') format('woff2'), url('fonts/ubuntu-v13-latin-regular.woff') format('woff'), url('fonts/ubuntu-v13-latin-regular.ttf') format('truetype'), url('fonts/ubuntu-v13-latin-regular.svg#Ubuntu') format('svg'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; src: url('fonts/ubuntu-v13-latin-500.eot'); src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url('fonts/ubuntu-v13-latin-500.eot?#iefix') format('embedded-opentype'), url('fonts/ubuntu-v13-latin-500.woff2') format('woff2'), url('fonts/ubuntu-v13-latin-500.woff') format('woff'), url('fonts/ubuntu-v13-latin-500.ttf') format('truetype'), url('fonts/ubuntu-v13-latin-500.svg#Ubuntu') format('svg'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; src: url('fonts/ubuntu-v13-latin-700.eot'); src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('fonts/ubuntu-v13-latin-700.eot?#iefix') format('embedded-opentype'), url('fonts/ubuntu-v13-latin-700.woff2') format('woff2'), url('fonts/ubuntu-v13-latin-700.woff') format('woff'), url('fonts/ubuntu-v13-latin-700.ttf') format('truetype'), url('fonts/ubuntu-v13-latin-700.svg#Ubuntu') format('svg'); }
@font-face { font-family: 'Gloria Hallelujah'; font-style: normal; font-weight: 400; src: url('fonts/gloria-hallelujah-v10-latin-regular.eot'); src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url('fonts/gloria-hallelujah-v10-latin-regular.eot?#iefix') format('embedded-opentype'), url('fonts/gloria-hallelujah-v10-latin-regular.woff2') format('woff2'), url('fonts/gloria-hallelujah-v10-latin-regular.woff') format('woff'), url('fonts/gloria-hallelujah-v10-latin-regular.ttf') format('truetype'), url('fonts/gloria-hallelujah-v10-latin-regular.svg#GloriaHallelujah') format('svg'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 700; src: url('fonts/ibm-plex-mono-v4-latin-700italic.eot'); src: local('IBM Plex Mono Bold Italic'), local('IBMPlexMono-BoldItalic'), url('fonts/ibm-plex-mono-v4-latin-700italic.eot?#iefix') format('embedded-opentype'), url('fonts/ibm-plex-mono-v4-latin-700italic.woff2') format('woff2'), url('fonts/ibm-plex-mono-v4-latin-700italic.woff') format('woff'), url('fonts/ibm-plex-mono-v4-latin-700italic.ttf') format('truetype'), url('fonts/ibm-plex-mono-v4-latin-700italic.svg#IBMPlexMono') format('svg'); }
@font-face { font-family: 'Barrio'; font-style: normal; font-weight: 400; src: url('fonts/barrio-regular-subset.eot'); src: local('Barrio Regular'), local('Barrio-Regular'), url('fonts/barrio-regular-subset.eot?#iefix') format('embedded-opentype'), url('fonts/barrio-regular-subset.woff2') format('woff2'), url('fonts/barrio-regular-subset.woff') format('woff'), url('fonts/barrio-regular-subset.ttf') format('truetype'), url('fonts/barrio-regular-subset.svg#Barrio-Regular') format('svg'); }

/* -----  1.2 Reset & Normalization  ---------------------------------------- */

*, *::before, *::after { margin: 0; padding: 0; border: none; box-sizing: border-box; outline:none; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }
::-moz-selection { background: #7BEFD5; color: #5A00D8; }
::selection { background: #7BEFD5; color: #5A00D8; }
html { background: #fff; color: #46375A; overflow-y: scroll; position: relative; min-height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(113, 239, 172, .5); scroll-padding-top:3rem; }
ol, ul { list-style: none; }
img { display:block; }
[hidden] { display: none; }
input[type="text"], input[type="submit"], select { -webkit-appearance:none; }

/* -----  1.3 General Typography  ------------------------------------------- */

html, html button, html input, html select, html textarea { font:normal 400 16px Ubuntu, sans-serif; line-height:1.55; }
@media all and (max-width: 25rem) {
  html { font-size: 0.9rem; }
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, pre {
  font-size: inherit;
  line-height: inherit;
  font-weight: normal;
}

h1 { font-size:2.25rem; /* 36px */ text-align:center; color:#552896; margin-bottom:2rem; line-height:1.4; font-weight:bold; }
h2 { font-size:1.75rem; /* 28px */ text-align:center; color:#552896; line-height:1.4; font-weight:500; }
h3, .a-siteintro { font-size:1.5rem; /* 24px */ }
h3 { font-weight:500; }
.center { text-align:center; }
.m-card h3, .m-listitem h3 { font-size:1.125rem; /* 18px */ }
.a-intro, .m-card.sections p { font-size:1.25rem; /* 20px */ }
.m-card small, .a-buttonfilter { font-size:.75rem; /* 12px */ }

.m-listitem p { overflow-wrap:break-word; word-wrap:break-word; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; hyphenate-limit-chars:10 4 4; -webkit-hyphenate-limit-before:4; -webkit-hyphenate-limit-after:4; }

/* -----  1.4 Links  -------------------------------------------------------- */

a { text-decoration:none; color:#46375A; }
.m-content a:not(.a-buttonlink), .m-gridcontent a:not(.a-buttonlink), .m-listitem p a, .o-crisis p a { text-decoration:underline; text-decoration-color:#5A00D8; }
.m-content a:hover, .m-gridcontent a:hover, .m-listitem p a:hover, .o-crisis p a:hover { color:#5A00D8; }
.m-content a:focus, .m-gridcontent a:focus, .m-listitem p a:focus, .o-crisis p a:focus { box-shadow:0 0 0 2px white, 0 0 0 4px #F39019; }

/* -----  1.5 Forms & Buttons  ---------------------------------------------- */

/* buttons and button-like CTAs */
.a-buttonlink, .a-buttonlinkstrong, .a-buttonfilter, input[type="submit"], .block button { display:inline-block; text-align:center; border:1px solid #5A00D8; background:transparent; color: #5A00D8; border-radius:2rem; padding:1rem 2rem; line-height:1; font-size:1rem; outline:none; margin-top:1rem; }
.a-buttonlink:hover, .a-buttonfilter:hover, .block button:hover { border-color:#2A0064; color:#2A0064; }
.a-buttonlink:focus, .a-buttonfilter:focus, .block button:focus { box-shadow:0 0 0 2px white, 0 0 0 4px #F39019; }
.a-buttonlink.f-centered { margin-left:50%; transform:translateX(-50%); }
.a-buttonlink.f-external, .a-buttonlinkstrong.f-external { position:relative; background-image:url(img/icons/outlink-5a00d8.svg); background-position:top .85rem left 1.5rem; background-repeat:no-repeat; background-size:1.125rem; padding-left:3.5rem; }
.a-buttonlinkstrong.f-external { background-image:url(img/icons/outlink-ffffff.svg); }
.a-buttonlink.f-external .meta, .a-buttonlinkstrong.f-external .meta { display:block; position:absolute; bottom:-1.4rem; left:0; right:0; color:#5A00D8; font-size:.875rem; white-space:nowrap; }
.f-purple .a-buttonlink.f-external .meta, .f-purple .a-buttonlinkstrong.f-external .meta { color:#fff; }
.a-buttonlink.f-external:hover .meta, .a-buttonlinkstrong.f-external:hover .meta { color:#2A0064; }
.f-purple .a-buttonlink.f-external:hover .meta, .f-purple .a-buttonlinkstrong.f-external:hover .meta { color:#fff; }

.a-buttonlinkstrong, input[type="submit"] { border-color:#5A00D8; background-color:#5A00D8; color:white; }
input[disabled] { border-color:#cdc9d3; background-color:#cdc9d3; color:white; }
.a-buttonlinkstrong:hover, input[type="submit"]:not([disabled]):hover { border-color:#2A0064; background-color:#2A0064; }
.a-buttonlinkstrong:focus, input[type="submit"]:not([disabled]):focus { box-shadow:0 0 0 2px white, 0 0 0 4px #F39019; }

/* filterbuttons */
.a-buttonfilter { padding:.25rem 1rem; margin:0 .25rem .5rem; font-size:.75rem; border:1px solid #2A0064; background:transparent; color: #2A0064; }
    .a-buttonfilter.active { background:#2A0064; color:white; }
    .a-buttonfilter:not(.active):hover { background:transparent; color:#5A00D8; border-color:#5A00D8; }

/* reveal buttons for hidden content; incl. class to reveal content */
button.a-revealbutton { border-style:dashed; background:url(img/icons/reveal.svg) top .85rem right 1.5rem no-repeat; background-size:1.125rem; padding-right:3.5rem; }
.f-reveal[hidden=true] { display:none; }

/* a text link with an arrow */
.a-showlink { background:url(img/icons/arrow-right.svg) center left no-repeat; background-size:1rem; padding-left:1.5rem; font-size:.875rem; font-weight:bold; }

form { }
    form fieldset { color:#212B36; }
        form legend { display:none; }
            form div { position:relative; width:100%; }
                form label, form input {  }
                form label { display:block; font-size:.875rem; margin-bottom:.2rem; position:relative; }
                    form label span { font-size:.75rem; position:absolute; bottom:0; right:0; color:#3D304F; }
                form input[type="text"], form input[type="email"], form textarea, form select { border: 1px solid #B9B4C0; background:#fff; border-radius:1px; color:#212B36; font-size:.875rem; padding:.5rem .5rem; margin-bottom:1.5rem; width:100%; }
                form input:focus, form textarea:focus, form select:focus { border-color:#5A00D8; }
                form input::placeholder { color:#B9B4C0; }

/* -----  1.6 Images & Figures  --------------------------------------------- */

img {
  border-style: none;
  width: 100%;
  height: auto;
}

figcaption {
  font-size: .75rem;
  line-height: 1.55;
}

blockquote { color:#472771; padding-left:2rem; background:url(img/icons/quote.svg) top left no-repeat; background-size:1rem; font-style:italic; line-height:1.35; }
cite { display:block; color:#46375A; font-size:.75rem; padding-left:2rem; line-height:1.35; font-style:normal; }
    cite strong { font-weight:500; display:block; }

/* -----  1.7 Accessibility  ------------------------------------------------ */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* =====  2 Grid  =========================================================== */

/* every section of every page is made up from full-width containers, to allow for background (images) */
.block { }

/* all direct descendants of a block are limited to the grid width of the layout */
    .block > * { width:90%; max-width:1212px; margin-left:auto; margin-right:auto; position:relative; }
    .block.f-centerif2 > .grid-2 { max-width:706px; }
    .block > *:first-child { padding-top:5rem; }
    .block.f-continued > *:first-child,
    .block:not(.f-orange):not(.f-grey):not(.f-purple) + .block:not(.f-orange):not(.f-grey):not(.f-purple) > *:first-child { padding-top:0; }
    .block > *:last-child { padding-bottom:5rem; }
    .block.f-continues > *:last-child { padding-bottom:1rem; }

/* the default appearance of a block's content is controlled using .grid-x classes; breakpoints control their behaviour on narrower screens */
    .grid-0 { /* padding:0 6.2%; */ }
    .grid-1, .grid-2, .grid-3, .grid-4, .grid-6, .grid-8, .grid-12 { display:grid; grid-column-gap:2%; grid-row-gap:0; }
    /* FLEXBOX FALLBACK: */
    .o-teasers .grid-2, .o-teasers .grid-3, .o-teasers .grid-4, .o-logogrid .grid-4, .o-teamlist .grid-3 { display:flex; display:grid; justify-content:space-around; }
    .grid-1 { grid-template-columns:repeat(1, 1fr); }
    .grid-2 { grid-template-columns:repeat(2, 1fr); }
    .grid-3 { grid-template-columns:repeat(3, 1fr); }
    .grid-4 { grid-template-columns:repeat(4, 1fr); }
    .grid-6 { grid-template-columns:repeat(6, 1fr); }
    .grid-8 { grid-template-columns:repeat(8, 1fr); }
    .grid-12 { grid-template-columns:repeat(12, 1fr); }
@media all and (max-width: 70rem) {
    .grid-4 { grid-template-columns:repeat(2, 1fr); }
    .f-mini .grid-4 { grid-template-columns:repeat(4, 1fr); }
}
@media all and (max-width: 45rem) {
    .grid-0 { padding:0; }
    .grid-8 { grid-template-columns:repeat(4, 1fr); }
    .grid-12 { grid-template-columns:repeat(6, 1fr); }
}
@media all and (max-width: 40rem) {
    .grid-2, .o-teasers .grid-2 { display:block; }
    .grid-3 { grid-template-columns:repeat(1, 1fr); }
    .grid-6 { grid-template-columns:repeat(2, 1fr); }
}
@media all and (max-width: 35rem) {
    .grid-4 { grid-template-columns:repeat(1, 1fr); }
    .f-mini .grid-4 { grid-template-columns:repeat(4, 1fr); }
}
@media all and (max-width: 30rem) {
    .f-mini .grid-4 { grid-template-columns:repeat(2, 1fr); }
}
@media all and (max-width: 25rem) {
    .grid-8 { grid-template-columns:repeat(2, 1fr); }
    .grid-12 { grid-template-columns:repeat(3, 1fr); }
}
@media all and (max-width: 20rem) {
    .grid-6 { grid-template-columns:repeat(1, 1fr); }
    .grid-8 { grid-template-columns:repeat(1, 1fr); }
    .grid-12 { grid-template-columns:repeat(1, 1fr); }
    .f-mini .grid-4{ grid-template-columns:repeat(1, 1fr); }
}


/* =====  3 Block elements  ================================================== */

/* -----  3.1 Block defaults  ------------------------------------------------ */

/* any headlines or paragraphs direct descendants of a block are intro content*/
.block > h1, .block > h2, .block > p { text-align:center; max-width:45rem; }
.block > h2 { margin-bottom:1rem; }
.block > .a-intro:not(:last-child) { margin-bottom:1rem; }
.block > h2 + .grid-1, .block > .a-intro + .grid-1,
.block > h2 + .grid-2, .block > .a-intro + .grid-2,
.block > h2 + .grid-3, .block > .a-intro + .grid-3,
.block > h2 + .grid-4, .block > .a-intro + .grid-4,
.block > h2 + .grid-6, .block > .a-intro + .grid-6,
.block > h2 + .grid-8, .block > .a-intro + .grid-8,
.block > h2 + .grid-12, .block > .a-intro + .grid-12 { margin-top:2rem; }

/* -----  3.2 Block color schemes  ------------------------------------------- */

/* blocks can make use of a background colour class */
.block.f-grey { background:#F1EEEA; }
.block.f-orange { background:#FFAC33; }
.block.f-purple { background:#5C00DC; color:white; }
    .block.f-purple h2,
    .block.f-purple form label { color:white; }
    .block.f-purple .a-buttonlink, .block.f-purple input[type="submit"] { background-color:white; color:#5C00DC; }

/* -----  3.3 Special blocks  ------------------------------------------------ */

.ribbon { position:fixed; top:0; left:0; background:darkred; font-size:.9rem; line-height:1.4; color:white; box-shadow:0 0 0 999px darkred; clip-path:inset(0 -100%); inset:0 auto auto 0; transform-origin:100% 0; transform:translate(-29.3%) rotate(-45deg); z-index:299; }
.ribbon-staging { background:darkgreen; box-shadow:0 0 0 999px darkgreen; }
  .ribbon span { width:55px; display:block; text-align:center; }

/* main navigation element, always on top */
.o-mainnav { }
    .o-mainnav ul { display:flex; justify-content:flex-end; align-content:stretch; align-items:center; flex-wrap:wrap; width:90%; max-width:1212px; margin-left:auto; margin-right:auto; }
        .o-mainnav ul > li:first-child { flex-grow:1; flex-basis:20%; }
        .o-mainnav li { flex-grow:0; display:flex; position:relative; }
            .o-mainnav a:not(.a-buttonlink), .o-mainnav button { display:inline-block; padding:1.25rem .8rem; border:solid 1px transparent; color: #46375A; }
                .o-mainnav a:not(.a-buttonlink):focus span { box-shadow:0 0 0 2px white, 0 0 0 4px #F39019; }
                .o-mainnav a:not(.a-buttonlink):not(.a-logo):hover span,
                .o-mainnav .current > a span { border-bottom:1px solid #5A00D8; }
            .o-mainnav a.a-logo { padding:.5rem; }
            /*
            .o-mainnav button { border:none; background-color:transparent; padding-left:0; padding-right:.2rem; text-align: left; cursor: pointer; color:white; max-width:.5rem; overflow:hidden; }
            .o-mainnav button[aria-expanded="true"] { color:black; }
            */
            .o-mainnav button { opacity:.4; outline:none; background:transparent; border:none; padding-left:0; padding-right:.2rem; text-align: left; cursor: pointer; }
                .o-mainnav button img { display:block; width:1rem; height:auto; padding:.4rem .2rem; }
            .o-mainnav button:hover { opacity:1; }
            .o-mainnav button:focus { opacity:1; outline:none; }
            .o-mainnav button::-moz-focus-inner { border:0; }
                .o-mainnav button:focus img { box-shadow:0 0 0 2px white, 0 0 0 4px #F39019; }
            .o-mainnav button[aria-expanded="false"] ~ ul { display: none; }

            /* a11y expandable mechanism */
            .o-mainnav .navdropdown > a { padding-right:.3rem; }
            .o-mainnav button:focus { color:#46375A; }

            .o-mainnav a.a-buttonlink { margin-left:1rem; background:white; border-color:#ED6347; color:#ED6347; padding:.4rem 1rem; margin-top:0; }
            .o-mainnav .a-logo span { display:block; }
                .o-mainnav .a-logo img { height:1.5rem; width:auto; }

@media all and (min-width: 29.01rem) {
        /* 2nd level menu */
        .o-mainnav li:hover ul[hidden] { display:flex; }
        /* .o-mainnav li ul { position:absolute; top:4.2rem; left:0; background:white; width:90%; max-width:1212px; margin-left:auto; margin-right:auto; } */
        .o-mainnav li ul { display:flex; flex-direction:column; align-items:stretch; position:absolute; top:4rem; left:-.15rem; z-index:100; box-shadow:0px 5px 10px rgba(39, 8, 77, 0.15); width:auto; }
            .o-mainnav li li { background:white; }
                .o-mainnav li li a:not(.a-buttonlink) { display:block; padding:.5rem 1rem; white-space: nowrap; width:100%; min-width:12rem; }
                .o-mainnav li li:first-child a:not(.a-buttonlink) { padding-top:1rem; }
                .o-mainnav li li:last-child a:not(.a-buttonlink) { padding-bottom:1rem; }
}
@media all and (min-width: 53.01rem) {
/* sticky on screens >800px wide */
header { min-height:4.2rem; }
.o-mainnav { position:fixed; top:0; left:0; z-index:100; background:white; width:100%; }
}
@media all and (max-width: 53rem) {
      .o-mainnav ul { justify-content:flex-start; }
        .o-mainnav ul > li:first-child { flex-grow:1; flex-basis:100%; }
        .o-mainnav > ul > li:last-child { position:absolute; top:1rem; right:.5rem; }
            .o-mainnav a:not(.a-buttonlink), .o-mainnav button { padding:0 .5rem 1rem; }
            .o-mainnav a.a-logo { padding-top:1rem; }
            .o-mainnav .navdropdown > a { padding-right:.3rem; }
            .o-mainnav a.a-buttonlink { margin-left:0; margin-right:1rem; }
            .o-mainnav img { height:1.8rem; width:auto; margin-top:.2rem; }
        .o-mainnav li ul { top:2.5rem; }
}
@media all and (max-width:29rem) {
            .o-mainnav button { border:none; padding-left:0; padding-right:0rem; max-width:0rem; overflow:hidden; }
}

/* main navigation element, always on top; old version 1-level only */
.o-mainnav-old { }
    /* overriding the default margin of blocks */
    .block.o-mainnav-old > * { padding:.5rem 0; }
    /* main nav is a list, layouted with flexbox */
    .o-mainnav-old ul { display:flex; align-items:center; justify-content:flex-end; align-content:stretch; flex-wrap:wrap; }
        .o-mainnav-old li:first-child { flex-grow:1; flex-basis:20%; }
        .o-mainnav-old li { flex-grow:0; }
            .o-mainnav-old a:not(.a-buttonlink) { display:inline-block; padding:.5rem; border:solid 1px transparent; }
            .o-mainnav-old a.a-buttonlink { margin-left:1rem; }
            .o-mainnav-old img { height:1.8rem; width:auto; margin-top:.1rem; }
@media all and (max-width: 42rem) {
    .o-mainnav-old ul { justify-content:flex-start; }
        .o-mainnav-old li:first-child { flex-grow:1; flex-basis:100%; }
        .o-mainnav-old li:last-child { position:absolute; top:1rem; right:.5rem; }
            .o-mainnav-old a.a-buttonlink { margin-left:0; }
            .o-mainnav-old img { height:1.8rem; width:auto; margin-top:.2rem; }
}

/* OLD footer, always last element *
.o-footer { background:#3D304F; color:#fff; text-align:center; padding:4rem 0 1rem; }
    .o-footer a { color:#fff; }
        .o-footer a:focus span, .o-footer a:focus img { box-shadow:0 0 0 2px #3D304F, 0 0 0 4px #F39019; }
    /* overriding the default margin of blocks*
    .block.o-footer > * { padding:0; }
    .o-footer > a { display:inline-block; }
    /* footer menu *
    .o-footer ul { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; padding:1rem 0; }
    .o-footer ul.m-footer-social { padding-bottom:3rem; }
        .o-footer li a { display:inline-block; padding:.5rem; }
            .o-footer img { width:2.25rem; }
            .m-footer-social img { width:1.2rem; }
            @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                .m-footer-social img { height:1.2rem; }
            }
    /* legal texts in bottom line *
    .m-footer-legal, .m-footer-legal a { color:#8E7FA2; }
        .m-footer-legal a::before { content:'|'; padding:0 1rem; opacity:.4; }
@media all and (max-width: 45rem) {
    .m-footer-legal span { display:block; }
        .m-footer-legal a:first-of-type::before { content:''; padding:0; }
}
*/

/* footer, always last element */
.o-footer { background:#3D304F; color:#fff; }
    .o-footer p { margin-bottom:1rem; }
    .o-footer a { color:#fff; }
        .o-footer a:not(.a-buttonlink):focus span, .o-footer a:focus img { box-shadow:0 0 0 2px #3D304F, 0 0 0 4px #F39019; }
    .block.o-footer > * { padding:5rem 0 2.5rem; }
        .o-footer > div > div { grid-row:1 / 2; }
        .o-footer > div > div:nth-child(1) { order:1; grid-column:1 / 4; }
            .o-footer > div > div:nth-child(1) > a { display:block; margin-bottom:4.4rem; }
                .o-footer > div > div:nth-child(1) p a { color:#b0aab7; text-decoration:underline; }
                .o-footer > div > div:nth-child(1) p a:hover { color:white; }
                .o-footer > div > div:nth-child(1) p a:focus { box-shadow:0 0 0 2px #3d304f, 0 0 0 4px #F39019; text-decoration:none; }
                .o-footer img { width:5rem; }
        .o-footer > div > div:nth-child(2) { order:2; grid-column:4 / 7; padding-top:9.4rem; }
            .m-footer-social { display:flex; align-items:left; justify-content:left; flex-wrap:wrap; }
                .m-footer-social a { display:inline-block; margin-right:1rem; }
                .m-footer-social li:last-child a { margin-right:0; }
                    .m-footer-social img { width:1.5rem; }
                    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                        .m-footer-social img { height:1.2rem; }
                    }
        .o-footer > div > div:nth-child(3) { order:3; grid-column:8 / 13; }
            .o-footer h2 { padding-top:6.3rem; font-size:1.75rem; font-weight:500; margin-bottom:1rem; color:#fff; text-align:left; }
            .o-footer .a-buttonlink { background-color:#5A00D8; padding-left:2rem; padding-right:2rem; }
            .o-footer .a-buttonlink:hover { color:white; background-color:#2A0064; }
            .o-footer .a-buttonlink:focus { box-shadow:0 0 0 2px #3d304f, 0 0 0 4px #F39019; }
@media all and (max-width: 45rem) {
        .o-footer > div { display:flex; flex-direction:column; }
        .o-footer > div > div:nth-child(1) { order:3; padding-top:4rem; display:flex; flex-direction:column; }
            .o-footer > div > div:nth-child(1) a { margin-right:2rem; }
            .o-footer > div > div:nth-child(1) > a { order:2; margin-top:4rem; margin-bottom:0; }
            .o-footer > div > div:nth-child(1) > div { order:1; }
        .o-footer > div > div:nth-child(2) { padding-top:2rem; }
            .o-footer > div > div:nth-child(2) h2 { margin-top:3rem; }
                .m-footer-social a { padding:.5rem; }
                    .m-footer-social img { width:2.5rem; }
        .o-footer > div > div:nth-child(3) { order:1; }
            .o-footer h2 { padding-top:0; border:0; clip:none; height:auto; overflow:display; padding:0; position:relative; width:auto; }
    .block.o-footer > .m-footer-legal { padding-top:0; padding-bottom:1rem; }
}
    /* legal texts in bottom line */
    .m-footer-legal, .m-footer-legal a { color:#b0aab7; }
        .m-footer-legal a::before { content:'|'; padding:0 .7rem 0 .5rem; }
@media all and (max-width: 45rem) {
    .m-footer-legal p > span { display:block; }
        .m-footer-legal a:first-of-type::before { content:''; padding:0; }
}

/* -----  3.4 Blocks that are not blocks  ;)  -------------------------------- */

.a-skiplink { display:block; position:absolute; top:-999rem; }
.a-skiplink:focus { top:.5rem; left:.5rem; background:#F39019; color:white; z-index:1000; padding:.75rem 4rem .75rem 2rem; }

.a-backtotop { display:none; position:fixed; bottom:1rem; right:1rem; }
.a-backtotop.visible { display:block; }
    .a-backtotop img { width:3.35rem; height:3.35rem; }

/* -----  3.5 Mixed atoms  --------------------------------------------------- */

.m-formatmeta { font-size:.875rem; }
    .m-formatmeta span { padding-right:1.5rem; }
    .m-formatmeta span:last-child { padding-right:0; }
.a-metaheader { display:block; text-align:center; text-transform:uppercase; font-size:.75rem; font-weight:bold; margin-bottom:1rem; }
    .a-metaheader a { }
        .a-metaheader span { }
    .a-metaheader a:not(:last-child)::after { content:' >'; }

.a-cardssubheader, .block > h2.a-cardssubheader { text-align:left; margin-top:5rem; margin-bottom:1.5rem; padding:0 17%; }
.block > .grid-0:first-child > h2.a-cardssubheader { margin-top:0; }
@media all and (max-width: 50rem) {
.a-cardssubheader, .block > h2.a-cardssubheader { padding:0; }
}

.a-anchorlinks { text-align:center; padding:0 17%; margin-bottom:5rem; }
.m-content .a-anchorlinks { margin-top:1rem; margin-bottom:0; }
    .a-anchorlinks a { text-decoration:underline; -webkit-text-decoration-style:dotted; text-decoration-style:dotted; text-decoration-line:underline; text-decoration-color:#5A00D8; padding:0 1rem; }
        .a-anchorlinks span { word-wrap:nowrap; white-space:nowrap; }
        :not(.m-content) .a-anchorlinks a:focus span { box-shadow:0 0 0 2px #fff, 0 0 0 4px #F39019; }
@media all and (max-width: 50rem) {
.a-anchorlinks { padding:0; }
}

.a-listothers { padding:0 17%; margin:1.5rem 0; }
@media all and (max-width: 50rem) {
.a-listothers { padding:0; }
}

.a-level { background:url(img/icons/person.svg) center left no-repeat; background-size:1.1em; padding-left:1.5rem; }

.a-duration { background:url(img/icons/clock.svg) center left no-repeat; background-size:1.1em; padding-left:1.5rem; }


/* =====  4 Block content  =================================================== */

/* -----  4.1 Cards  --------------------------------------------------------- */

/* baseline card */
.m-card { display:block; position:relative; background:#fff; grid-auto-rows:minmax(100px,auto); border-radius:1px; margin:.75rem 0; overflow-wrap:anywhere; flex-basis:23%; line-height:1.4; }
.grid-3 .m-card { flex-basis:31%; }
.m-card, .m-card .text { display: flex; flex-direction: column; }
    .m-card .text { flex-grow: 1; order:1; padding:.5rem 1rem 1rem; }
    .m-card.f-external .text { background:url(img/icons/outlink.svg) top .7rem left 1rem no-repeat; background-size:1.125rem; padding-left:3rem; }
        .m-card h3 { font-weight:500; margin-bottom:.5rem; hyphens:auto; }
        .m-card h3 a::after { content:''; position:absolute; left:0; top:0; right:0; bottom:0; }
        .m-card h3 a:hover { color:#5A00D8; }
        .m-card h3 a:focus { text-decoration: underline; }
        .m-card:focus-within { box-shadow:0 0 0 2px #F39019; }
        .m-card:focus-within h3 a:focus { color:#5A00D8; text-decoration: none; }
        .m-card .a-meta { font-size:.875rem; margin:-.5rem 0 .75rem; }
        .m-card .text p ~ .a-showlink { margin-bottom:1rem; }
        .m-card .text .a-showlink { margin-top:auto; }
        .m-card .img { border-bottom:1px solid #F1EEEA; position:relative; height:0; width:100%; padding:0; padding-bottom:56.25%; }
            .m-card img { position:absolute; height:100%; width:100%; left:0; top:0; }
            .m-card .a-teasertag { position:absolute; margin-left:1rem; bottom:1rem; right:0; display:block; background:#5A00D8; color:white; padding:.2rem .5rem; font-size:.875rem; }
            .m-card .a-teasertag.f-white { background:#fff; color:#46375A; }
            .m-card .a-teasertag.f-grey { background:#F1EEEA; color:#46375A; }
            .m-card .a-teasertag.f-orange { background:#FFAC33; color:#46375A; }

.m-card.f-shadow { box-shadow:0px 5px 10px rgba(61, 48, 79, 0.15); }
        .m-card.f-shadow:focus-within { box-shadow:0px 5px 10px rgba(61, 48, 79, 0.15), 0 0 0 2px #F39019; }

/* override grid and appearance for portfolio cards */
.o-teasers.f-portfolio > ul { grid-template-columns:repeat(2, 1fr); }
@media all and (max-width: 60rem) { /* ensures an earlier break to single-column than normally for grid-2 blocks */
  .o-teasers.f-portfolio .grid-2 { display:block; }
}
  .f-portfolio .m-card { flex-direction:row; }
    .f-portfolio .img { max-width:200px; height:auto; padding:0; flex-shrink:0; width:40%; }
      .f-portfolio img { position:relative; height:100%; object-fit:cover; }

.o-teamlist {}
/* override default grid behaviour for the teamlist block (break earlier) */
@media all and (max-width: 65rem) {
    .o-teamlist .grid-3 { grid-template-columns:repeat(2, 1fr); }
}
@media all and (max-width: 45rem) {
    .o-teamlist .grid-3 { grid-template-columns:repeat(1, 1fr); }
}

/* team member card */
.m-teammember { background:#fff; border-radius:1px; margin:.75rem 0; box-shadow:0px 5px 10px rgba(61, 48, 79, 0.15); overflow-wrap:anywhere; position:relative; font-size:1.125rem; overflow:hidden; position:relative; }
  .m-teammember details { display:block; position:relative; }
    .m-teammember summary { cursor:pointer; }
      .m-teammember img { display:block; }
        .m-teammember h3 { font-weight:500; font-size:1.125rem; }
      .m-teammember summary > div::after { content:'✚'; position:absolute; bottom:.6rem; right:.7rem; }
      .m-teammember details[open] summary > div::after { display:none; }
    .m-teammember details > div { padding:1rem; display:block; font-size:1rem; line-height:1.4;}
      .m-teammember .a-linklist { margin-top:.5rem; }

@media all and (min-width: 45.01rem) {
.m-teammember { flex-basis:31%; display:flex; align-items:stretch; flex-direction:column; grid-auto-rows:minmax(100px,auto); }
  .m-teammember details { height:100%; }
      .m-teammember details[open] img { position:absolute; bottom:0; right:0; height:6.3rem; width:6.3rem; }
      .m-teammember summary > div { padding:.5rem 1rem .6rem; height:6.3rem; max-height:6.3rem; }
      .m-teammember details[open] summary > div { height:auto; max-height:unset; }
    .m-teammember details > div { padding-top:.5rem; }
      .m-teammember .a-linklist { position:absolute; bottom:1rem; left:1rem; }
}
@media all and (max-width: 45rem) {
    .m-teammember summary { display:flex; }
      .m-teammember img { width:30%; min-width:30%; height:auto; }
      .m-teammember summary > div { padding:.5rem 1rem .6rem; }
}

/* flavour: social media  */
.m-socialmediateaser { flex-basis:25%; display:block; position:relative; background:transparent; grid-auto-rows:minmax(100px,auto); border-radius:1px; margin:.75rem 0; overflow-wrap:anywhere; text-align:center; display: flex; flex-direction: column; position:relative; display: flex; flex-direction: column; font-size:.875rem; }
    .m-socialmediateaser h3 { order:1; margin-bottom:.5rem; font-size:1.125rem; }
    .m-socialmediateaser h3 a::after { content:''; position:absolute; left:0; top:0; right:0; bottom:0; }
    .m-socialmediateaser h3 a:focus { box-shadow:0 0 0 2px #F1EEEA, 0 0 0 4px #F39019; }
    .m-socialmediateaser p { order:2; padding:0 10%; }
    .m-socialmediateaser img { width:3rem; max-width:50%; height:auto; margin:0 auto 1rem; }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .m-socialmediateaser img { width:3.4rem; height:3.4rem; }
    }
    .m-socialmediateaser a::after { content:''; position:absolute; left:0; top:0; right:0; bottom:0; }

.m-listitem { display:flex; position:relative; background:transparent; grid-auto-rows:minmax(100px,auto); border-radius:1px; margin:1.5rem 17%; flex-direction:row; justify-content:space-between; line-height:1.4; }
    .m-listitem .text { display: flex; flex-direction: column;flex-grow: 1; order:1; padding:.5rem 1rem 1rem; flex-basis:61.5%; flex-grow:0; }
        .m-listitem h3 { margin-bottom:.5rem; }
        .m-listitem h3 a::after { content:''; position:absolute; left:0; top:0; right:0; bottom:0; }
        .m-listitem h3 a:hover { color:#5A00D8; }
        .m-listitem h3 a:focus { text-decoration: underline; }
        .m-listitem:focus-within { box-shadow:0 0 0 2px #F39019; }
        .m-listitem:focus-within h3 a:focus { text-decoration: none; }
        .m-listitem .text .a-showlink { margin-top: auto; }
        /*
        .m-listitem .a-event { position:relative; }
            .m-listitem .a-event > * { margin-left:10rem; }
            .m-listitem .a-event .eventfacts { display:block; position:absolute; top:0; left:0; margin:0; }
                .m-listitem .a-event .eventfacts span { display:block; }
        */
    .m-listitem .img { flex-basis:35.5%; flex-grow:0; margin-top:1rem; margin-bottom:1rem; }
        .o-listing .m-listitem img { border:1px solid #F1EEEA; }
@media all and (max-width: 50rem) {
.m-listitem { margin-left:0; margin-right:0; }
}
@media all and (max-width: 35rem) {
.m-listitem { flex-direction:column; padding-right:0; padding-left:0; }
}

.a-postdate { opacity:.5; line-height:1.1; margin-top:.8rem; }

/* flavour: line for separation */
.m-listitem.f-line { margin-top:0; margin-bottom:0; border-top:1px solid #C4CDD5; padding-top:.5rem; padding-bottom:.5rem; }
.m-listitem.f-line:last-child { border-bottom:1px solid #C4CDD5; }

.a-coverplaceholder { background:#5A00D8; height:0; overflow:hidden; padding-top:56.25%; position:relative; }
.a-coverplaceholder.f-events { background:#FFAC33; }
.a-coverplaceholder.f-jobs { background:#ED6347; }
.a-coverplaceholder.f-press { background:#C4BAAA; }
.a-coverplaceholder.f-new { background:#7BEFD5; }
    .a-coverplaceholder span { position:absolute; top:0; left:0; width:100%; height:100%; font-family:'Gloria Hallelujah'; font-size:2rem; color:#fff; opacity:.5; text-transform:uppercase; display:flex; justify-content:center; align-items:center; }
    .a-coverplaceholder.f-reach span { font-size:5rem; text-transform:none; opacity:.25; }


/* -----  4.2 Teaser elements  ----------------------------------------------- */

.m-filters { display:flex; justify-content:center; flex-wrap:wrap; padding-bottom:3rem; }
    .block > p.m-filters { max-width:none; }
    .m-filters .a-metaheader { flex-basis:100%; }

.m-pagination { display:flex; border-top:1px solid #C4CDD5; margin:1.5rem 17%; justify-content:center; align-items:center; }
    .m-pagination li { padding-top:1rem; }
        .m-pagination a, .m-pagination span { display:inline-block; padding:.5rem; text-align:center; }
        .m-pagination span { opacity:.3; }
        .m-pagination a[aria-current="true"] { font-weight:bold; }
        .m-pagination a:focus { box-shadow:0 0 0 2px #fff, 0 0 0 4px #F39019; }
        .m-pagination li:first-child a, .m-pagination li:first-child span,
        .m-pagination li:last-child a, .m-pagination li:last-child span { padding:0; height:2.25rem; width:2.25rem; border:2px solid #2A0064; border-radius:50%; display:flex; justify-content:center; align-items:center; }
        .m-pagination li:last-child a, .m-pagination li:last-child span { margin-left:auto; }
            .m-pagination li:first-child a svg, .m-pagination li:first-child span svg,
            .m-pagination li:last-child a svg, .m-pagination li:last-child span svg { width:1rem; height:auto; }
        .m-pagination li:first-child a:hover, .m-pagination li:last-child a:hover { color:#5A00D8; border-color:#5A00D8; }
            .m-pagination li:first-child a:hover svg path, .m-pagination li:last-child a:hover svg path { stroke:#5A00D8; }
    .m-pagination li:first-child { flex-grow:1; text-align:left; }
    .m-pagination li:last-child { flex-grow:1; text-align:right; }
@media all and (max-width: 50rem) {
.m-pagination { margin-left:0; margin-right:0; }
}

/* teaser feat. site sections or subpages */
.m-pageteaser { display:block; position:relative; background:transparent; text-align:center; /* FLEXBOX FALLBACK: */ flex-grow:0; flex-basis:31%; }
.grid-2 .m-pageteaser:nth-child(odd) { grid-column: 1 / 2; }
.grid-2 .m-pageteaser:nth-child(even) { grid-column: 2 / 3; }
.grid-2 .m-pageteaser:nth-child(3), .grid-2 .m-pageteaser:nth-child(4) { margin-top:3rem; }
    /* TODO: maybe turn into vertical flexbox, as markup order (image before h2) is not ideal */
    .m-pageteaser h2, .m-pageteaser h3 { padding:0 10%; margin-bottom:1.5rem; }
    .m-pageteaser p:first-of-type { padding:0 10%; margin-bottom:1.5rem; font-size:1.25rem; }
    .m-pageteaser img { max-width:388px; padding:0 10%; margin:0 auto; }
    .m-pageteaser a::after { content:''; position:absolute; left:0; top:0; right:0; bottom:0; }
    .f-smallerfont .m-pageteaser p:first-of-type { font-size:1.125rem; } /* when used as a content element (vs. on a page full of teasers), text should be same size as other content */
@media all and (max-width: 40rem) {
.m-pageteaser { margin-bottom:3rem; }
.m-pageteaser:last-child { margin-bottom:0; }
    .m-pageteaser p:first-of-type { padding:0; } /* in one-column view, use full width of viewport */
}

/* teaser feat. site sections or subpages */
.m-gridcontent { display:block; position:relative; background:transparent; text-align:center; margin-bottom:1rem; }
    .m-gridcontent h3 { font-size:1.25rem; margin-bottom:1rem; }
    .m-gridcontent p { padding:0 10%; font-size:1rem; }
    .m-gridcontent img { max-width:388px; padding:0 10%; margin:0 auto 1rem; }
.m-gridcontent.f-noimage { margin-bottom:5rem; }
@media all and (max-width: 40rem) {
    .m-gridcontent p { padding:0; } /* in one-column view, use full width of viewport */
}

/* flagship projects featured on front page */
.m-projectfigure { flex-basis:33%; display:block; position:relative; background:transparent; text-align:center; }
    .m-projectfigure p { padding:0 10%; color:#2A0064; }
        .m-projectfigure strong { display:block; font-size:2.5rem; font-weight:normal; margin-bottom:.5rem; line-height:1; }
    .m-projectfigure span { display:flex; flex-direction:column; justify-content:center; height:3rem; width:3rem; padding:0; margin:0 auto .5rem; }
        .m-projectfigure img { }
    .m-projectfigure a { color:#5A00D8; }
    .m-projectfigure a::after { content:''; position:absolute; left:0; top:0; right:0; bottom:0; }
    .m-projectfigure:hover a { text-decoration:underline; }
@media all and (max-width: 40rem) { /* extra margin only when in single-column view */
.m-projectfigure { margin-bottom:5rem; }
.m-projectfigure:last-child { margin-bottom:0; }
}

/* teaser asking for donations */
.o-donate { font-size:1.125rem; }
.o-donate > div > div { display:block; position:relative; background:transparent; }
    .o-donate > div > div:first-child { grid-column:1 / 6; text-align:center; }
        .o-donate ul { margin-top:1rem; color:white; line-height:1.1; }
            .o-donate li { padding-bottom:.5rem; }
            .o-donate li:nth-child(1) { font-family:'Barrio'; font-size:3rem; padding:1rem 0; }
            .o-donate li:nth-child(2) { font-family:'IBM Plex Mono'; font-weight:700; font-style:italic; font-size:2.2rem; }
            .o-donate li:nth-child(3) { font-family:'Gloria Hallelujah'; font-size:2.5rem; }
    .o-donate > div > div:nth-child(2) { grid-column:8 / 13; padding-top:2.5rem; }
@media all and (max-width: 65rem) {
    .o-donate > div > div:first-child { grid-column:1 / 7; }
}
@media all and (max-width: 50rem) {
    .o-donate > div > div:nth-child(2) { grid-column:7 / 13; }
}
@media all and (max-width: 45rem) {
  .o-donate > div > div:first-child { grid-column:1 / 7; }
  .o-donate > div > div:nth-child(2) { grid-column:1 / 7; text-align:center; }
}
@media all and (max-width: 25rem) {
  .o-donate > div > div:first-child { grid-column:1 / 4; }
  .o-donate > div > div:nth-child(2) { grid-column:1 / 4; }
}
@media all and (max-width: 20rem) {
  .o-donate > div > div:first-child { grid-column:1 / 2; }
  .o-donate > div > div:nth-child(2) { grid-column:1 / 2; }
}
    .o-donate .a-buttonlink { background:white; color:#5A00D8; border-color:white; margin-top:2rem; }
    .o-donate .a-buttonlink:focus { box-shadow:0 0 0 2px #F39019, 0 0 0 4px white; }

/* teaser featuring TA */
.o-tueftelakademie > div > div { display:block; position:relative; background:transparent; margin-top:1rem; }
    .o-tueftelakademie > div > div:first-child { grid-column:1 / 4; font-size:1.125rem; }
      .o-tueftelakademie > div > div:first-child img { margin-bottom:2rem; }
      .o-tueftelakademie > div > div:first-child p { margin-top:1rem; }
    .o-tueftelakademie > div > div:nth-child(2) { grid-column:5 / 13; }
      .o-tueftelakademie li { display:block; clear:left; }
      .o-tueftelakademie li:not(:last-child) { margin-bottom:3rem; }
        .o-tueftelakademie li img { float:left; width:20%; }
        .o-tueftelakademie li > *:not(img) { padding-left:calc(20% + 2rem); }

.o-calendar { }
    .o-calendar ul { margin-top:3rem; }
        .o-calendar li { display:flex; justify-content:space-between; align-items:baseline; margin:0 17%; font-size:1.25rem; }
            .o-calendar li time { text-align:center; line-height:1.2em; margin-right:1rem; }
                .o-calendar li time span { display:block; }
                .o-calendar li time span:first-of-type { font-weight:bold; }
            .o-calendar li div { display:flex; flex-wrap:wrap; flex-grow:1; justify-content:space-between; align-items:flex-start; }
                .o-calendar li p { margin-right:1rem; flex-basis:15rem; flex-grow:1; margin-bottom:1.5rem; line-height:1.2em; }
                    .o-calendar li p > span { display:block; }
                        .o-calendar li p.soldout > span span { text-decoration:line-through; }
                    .o-calendar li p > span:last-child { font-size:.75rem; }
                .o-calendar li a.a-buttonlink { padding:.5rem 1rem; margin:0 0 2rem; }
@media all and (max-width: 50rem) {
.o-calendar li { margin-left:0; margin-right:0; }
}

/* -----  4.3 Content blocks  ------------------------------------------------ */

/* testimonials */
.m-testimonial { display:block; position:relative; background:transparent; }
.grid-2 .m-testimonial:first-child { grid-column: 2 / 6; }
.grid-2 .m-testimonial:last-child { grid-column: 8 / 12; }
.grid-1 .m-testimonial { padding:0 17%; }
    .m-testimonial blockquote { font-size:1.125rem; margin-bottom:5rem; }
    .m-testimonial cite { margin-top:-3rem; margin-bottom:1rem; }
    .m-testimonial > p { text-align:center; }
@media all and (max-width: 70rem) {
.m-testimonial { margin-bottom:5rem; }
}

.o-homepageheader { }
    .o-homepageheader > div:first-child { width:100%; max-width:100%; height:39vw; margin-bottom:5rem; background-size:cover; background-position:center; padding-top:0; display:flex; align-items:center; justify-content:center; }
    .o-homepageheader h1 { font-family:'Gloria Hallelujah',Arial; color:white; font-size:3.2rem; width:50rem; max-width:90%; font-weight:normal; margin-bottom:4rem; }
    .homepageheader-partnerlogos { position:absolute; bottom:1rem; right:2rem; }
      .homepageheader-partnerlogos a { display:inline-block; padding:.5rem; background:white; opacity:.85; }
      .homepageheader-partnerlogos a:hover { opacity:1; }
        .homepageheader-partnerlogos img { height:10vw; width:auto; max-height:3.5rem; }
@media all and (max-width: 58rem) {
    .o-homepageheader h1 { font-size:2.8rem; }
}
@media all and (max-width: 50rem) {
    .o-homepageheader > div:first-child { height:55vw; }
    .o-homepageheader h1 { font-size:2.5rem; }
}
@media all and (max-width: 35rem) {
    .o-homepageheader > div:first-child { height:75vw; }
    .o-homepageheader h1 { font-size:2rem; }
}
@media all and (max-width: 25rem) {
    .o-homepageheader h1 { font-size:1.8rem; }
}

.m-content {}
    .m-content h1 { font-weight:bold; }
    .m-content h2, .m-content p, .m-content ul, .m-content ol { margin-bottom:1rem; padding:0 12.8%; }
    .m-content figure video { max-width:100%; height:auto; }
@media all and (max-width: 60rem) {
    .m-content h2, .m-content p, .m-content ul, .m-content ol { margin-bottom:1rem; padding:0; }
}
    .m-content h2 { text-align:left; font-size:1.125rem; font-weight:bold; color:#46375A; margin:3rem 0 1rem; }
    .m-content > h2:first-child { margin-top:0; }
        .m-content li { list-style:disc; padding-left: .5rem; margin-left: 2rem; margin-bottom:1rem; }
    .m-content figure, .m-content .m-figuredouble, .m-content .m-figurebigger1, .m-content .m-figurebigger2 { margin:5rem 0 4.5rem; }
    .m-content > figure:first-child, .m-content > .m-figuredouble:first-child, .m-content > .m-figurebigger1:first-child, .m-content > .m-figurebigger2:first-child { margin-top:0; }
    .m-content > figure:last-child, .m-content > .m-figuredouble:last-child, .m-content > .m-figurebigger1:last-child, .m-content > .m-figurebigger2:first-child { margin-bottom:0; }
        .m-content figcaption { font-size:.875rem; padding-top:1rem; }
@media all and (max-width: 40rem) {
    .m-content figure, .m-content .m-figuredouble, .m-content .m-figurebigger1, .m-content .m-figurebigger2 { margin:2rem 0; }
    .m-content > .m-figuredouble figure:last-child, .m-content > .m-figurebigger1 figure:last-child, .m-content > .m-figurebigger2 figure:last-child { display:none; }
}
@media all and (min-width: 35rem) {
    .m-content figure.portrait { }
        .m-content figure.portrait img, .m-content figure.portrait figcaption { display:block; width:48%; margin:0 auto; }
    .m-content .m-figuredouble { display:flex; }
    .o-page .m-content .m-figuredouble { margin-left:17%; margin-right:17%; }
        .m-content .m-figuredouble figure { flex-basis:48%; margin:0; padding:0; }
        .m-content .m-figuredouble figure:first-child { margin-right:2%; }
        .m-content .m-figuredouble figure:nth-child(2) img { margin-top:30%; }
    .m-content .m-figurebigger1, .m-content .m-figurebigger2 { position:relative; }
    .o-page .m-content .m-figurebigger1, .o-page .m-content .m-figurebigger2 { margin-left:17%; margin-right:17%; }
        .m-content .m-figurebigger1 figure, .m-content .m-figurebigger2 figure { margin:0; padding:0; }
        .m-content .m-figurebigger1 figure:first-child,
        .m-content .m-figurebigger2 figure:nth-child(2) { width:70%; padding-bottom:5rem; }
        .m-content .m-figurebigger2 figure:nth-child(2) { margin-left:30%; }
            .m-content .m-figurebigger2 figure:nth-child(2) figcaption { paddin-left:30%; text-align:right; }
        .m-content .m-figurebigger1 figure:nth-child(2),
        .m-content .m-figurebigger2 figure:first-child { width:45%; position:absolute; bottom:0; right:0; }
        .m-content .m-figurebigger2 figure:first-child { left:0; right:auto; }
}
    .m-content blockquote { margin:5rem 12.8%; }
        .m-content blockquote p { padding:0; }
    .m-content cite { margin:-3rem 0 5rem; }
@media all and (max-width: 40rem) {
    .m-content blockquote { margin-top:2rem; }
    .m-content cite { margin-bottom:2rem; }
}

.o-page { font-size:1.125rem; }
    .o-page p, .o-page h2, .o-page h3, .o-page h4, .o-page figure, .o-page ul, .o-page ol { padding:0 25.5%; }
@media all and (max-width: 60rem) {
    .o-page p, .o-page h2, .o-page h3, .o-page h4, .o-page figure { padding:0 17%; }
}
@media all and (max-width: 40rem) {
    .o-page p, .o-page h2, .o-page h3, .o-page h4, .o-page figure { padding:0; }
}

.o-post {  }
    .o-post h1 { margin-bottom:5rem; }
    .o-post > div > div { padding:3rem 8.5% 5rem; font-size:1.125rem; background-color:white; margin:0 8.5%; }
    .o-post figure { padding:0 12.8%; }
    .o-post figure.portrait { padding:0; }
@media all and (max-width: 60rem) {
    .o-post > div > div { margin:0; }
    .o-post figure { padding:0; }
}

.m-topic { display:flex; align-items:center; font-size:1.125rem; margin-bottom:5rem; }
.m-topic:last-of-type { margin-bottom:0; }
    .m-topic div { flex-basis:49%; }
    .m-topic .text { order:2; }
    .m-topic.f-centered .text { text-align:center; }
    .m-topic .img { order:1; margin-right:2%; }
    .m-topic:nth-child(even) .text, .m-topic.f-centered.f-imageright .text { order:1; margin-right:2%; }
    .m-topic:nth-child(even) .img, .m-topic.f-centered.f-imageright .img { order:2; margin-right:0; }
        .m-topic h2, .m-topic p { margin-bottom:1rem; }
        .m-topic:not(.f-centered) h2 { text-align:left; }
        .m-topic .text a { text-decoration:underline; }
        .m-topic .text .a-buttonlink { margin-top:1rem; text-decoration:none; }
@media all and (max-width: 40rem) {
.m-topic { flex-wrap:wrap; margin-bottom:2rem; }
    .m-topic div { flex-basis:100%; }
    .m-topic .img { margin-right:0; margin-bottom:1rem; }
    .m-topic:nth-child(even) .text { order:2; margin-right:0; }
    .m-topic:nth-child(even) .img { order:1; margin-right:0; }
}

.m-projectfacts { display:flex; font-size:.875rem; border-top:1px solid #D8D8D8; border-bottom:1px solid #D8D8D8; margin:3rem 0; padding:0 12.8% 3rem; }
    .m-projectfacts > div { flex-basis:48%; }
    .m-projectfacts > div:first-child { margin-right:2%; }
        .m-projectfacts h3 { font-size:1.125rem; font-weight:bold; color:#46375A; margin:3rem 0 1rem; }
        .m-projectfacts .a-person { margin-bottom:1rem; }
        .m-projectfacts .a-linklist a { margin-bottom:.5rem; }
@media all and (max-width: 60rem) {
.m-projectfacts { padding:0; }
}
@media all and (max-width: 40rem) {
.m-projectfacts { flex-wrap:wrap; }
    .m-projectfacts > div { flex-basis:100%; }
}

.m-articleauthors { margin-top:4rem; }
  .m-articleauthors .a-person { margin-top:.5rem; font-size:1rem; }

.a-person { display:flex; font-size:.875rem; }
    .a-person p { order:2; }
        .a-person strong { display:block; }
    .a-person img { display:block; order:1; width:auto; height:2.5rem; margin-right:1rem; border-radius: 50%; }
/* flavour "bigimage" used for testimonials, with a bigger portrait aligned to right instead of left */
.a-person.f-bigimage { justify-content:space-between; }
    .a-person.f-bigimage p { order:1; }
    .a-person.f-bigimage img { order:2; width:5rem; height:5rem; margin-right:0; margin-left:1rem; }

.a-linklist { font-size:.875rem; }
    .a-linklist a { display:inline-block; background:url(img/icons/outlink.svg) top .1rem left no-repeat; background-size:1.125rem; padding-left:1.8rem; color:#380087; }
    .a-linklist a:focus { box-shadow:0 0 0 2px #fff, 0 0 0 4px #F39019; }
    .a-linklist .twitter a { background-image:url(img/icons/tw.svg); }
    .a-linklist .facebook a { background-image:url(img/icons/fb.svg); }
    .a-linklist .youtube a { background-image:url(img/icons/yt.svg); }
    .a-linklist .news a { background-image:url(img/icons/outlink.svg); }
    .a-linklist .email a { background-image:url(img/icons/email.svg); }
    .a-linklist .linkedin a { background-image:url(img/icons/ld.svg); }

.a-projectpartner { }
    .a-projectpartner li { margin-bottom:1rem; }
        .a-projectpartner img { width:50%; }
        .a-projectpartner span { display:block; width:50%; }

.o-breadcrumb { font-size:.75rem; }
    .block.o-breadcrumb > p { padding:1.5rem 0 0; }
        .o-breadcrumb a { color:#5C00DC; margin-left:.5rem; background:url(img/icons/arrow-right-small.svg) center left no-repeat; background-size:1rem auto; padding-left:1.6rem; }
        .o-breadcrumb a:hover { text-decoration:underline; text-decoration-color:#5C00DC; }
        .o-breadcrumb a:focus { box-shadow:0 0 0 2px #F1EEEA, 0 0 0 4px #F39019; }
.o-breadcrumb + .block.o-pageheader > :first-child { padding-top:3rem; }
.o-breadcrumb + .block.o-post > :first-child { padding-top:1.5rem; }
@media all and (max-width: 25rem) and (orientation: portrait) {
    .block.o-breadcrumb > p { padding-top:1rem; }
.o-breadcrumb + .block.o-pageheader > :first-child { padding-top:2rem; }
}

/* smaller margins for grey title bar on narrow screens */
@media all and (max-width: 25rem) and (orientation: portrait) {
.o-pageheader > h1:first-child, .o-pageheader > h2:first-child, .o-pageheader > p:first-child { padding-top:2rem; }
.o-pageheader > h1, .o-pageheader > h2 { margin-bottom:1rem; }
.o-pageheader > h2:last-child, .o-pageheader > p:last-child { padding-bottom:2.5rem; }
}

/*
.o-breadcrumb-old { font-size:.625rem; }
    .block.o-breadcrumb-old > p { max-width:100%; padding:.5rem .5rem; text-align:left; color:#7A619E; }
        .o-breadcrumb-old a { margin-right:.25rem; color:#7A619E; }
        .o-breadcrumb-old a::after { content:'>'; padding-left:.25rem; }
*/

.o-jumptag { position:relative; z-index:99; }
.o-homepageheader .o-jumptag { width:100%; max-width:100%; }
    .o-jumptag div { font-size:.875rem; position:absolute; background:#ffac33; text-align:center; top:-3rem; right:0; padding:.5rem 1rem; box-shadow: 0px 5px 10px rgba(61, 48, 79, 0.15); }
    .o-homepageheader .o-jumptag div { top:-6rem; }
        .o-jumptag p:last-child { }
            .o-jumptag a { text-decoration:underline; -webkit-text-decoration-style:dotted; text-decoration-style:dotted; text-decoration-line:underline; text-decoration-color:#5A00D8; }
@media all and (max-width: 25rem) and (orientation: portrait) {
.o-jumptag { height:1rem; }
    .o-jumptag div { top:-1.5rem; }
}

.o-imageblock {}
    .block.o-imageblock > div { padding-bottom:0; padding-top:0; }
    .o-imageblock div { position:relative; max-width:100%; min-width:100%; width:100%; height:39vw; overflow:hidden; }
        .o-imageblock img { position:absolute; top:-100%; left:0; right: 0; bottom:-100%; margin:auto; }

.m-socialshare { border-top:1px solid #D8D8D8; margin-top:4rem; padding-top:3rem; }
    .m-socialshare span { display:inline-block; }
        .m-socialshare a { display:inline-block; padding:0 .5rem; }
        .m-socialshare a:first-of-type { padding-left:1rem; }
            .m-socialshare img { display:block; width:1.125rem; }
            @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            .m-socialshare img { width:1.3rem; height:1.3rem; }
            }
            .m-socialshare a:focus img { box-shadow:0 0 0 2px #fff, 0 0 0 4px #F39019; }

.m-form { margin:0 20.6%; }
@media all and (max-width: 45rem) {
.m-form { margin:0 10.3%; }
}
@media all and (max-width: 30rem) {
.m-form { margin:0 0; }
}
.m-form.f-inpost { margin:5rem 12.8%; }
@media all and (max-width: 60rem) {
.m-form.f-inpost { margin:5rem 0; }
}
    .m-form h2, .m-form p { margin-bottom:1.5rem; }
    .m-form .honeypot { display:none; }

.m-teasermorelink { margin-top:2.5rem; }

.o-message { background:#7BEFD5; }
.o-message.f-error { background:#F58B75; }
  .block.o-message > div { padding-top:0; padding-bottom:0; }
    .o-message p { padding:1.5rem; font-size:1.125rem; text-align:center; }

.o-crisis { text-align:center; }
    .o-crisis > :last-child { padding-bottom:0; }
    .o-crisis > :first-child { padding-top:0; }
        .o-crisis p { padding:1rem .5rem; }
        .o-crisis p a { text-decoration:underline; }

.o-logogrid { }
    .block.o-logogrid > .a-intro + .grid-4 { margin-top:5rem; }

.m-betterplace { border:1px solid #9e97a7; padding:2rem 2rem 1rem; }
.m-betterplace.f-orange { background:#FFAC33; border:none; }
.m-content .m-betterplace { margin:5rem 12.8%; }
.m-content .m-betterplace:first-child { margin-top:0rem; }
.o-post .m-content .m-betterplace { margin-left:0; margin-right:0; }
@media all and (max-width: 60rem) {
.m-content .m-betterplace { margin-left:0; margin-right:0; }
}
    .m-betterplace h2, .m-betterplace p { margin:0 0 1rem; padding:0; }
    .m-betterplace h2 { margin-bottom:0; }
    .m-betterplace small { font-size:.75rem; opacity:.8; white-space:nowrap; }
    .m-betterplace .a-buttonlink { border-color:#ED6347; color:#ED6347; text-decoration:none; margin-right:1rem; }
    .m-betterplace .a-buttonlink:hover { background:#ED6347; color:#fff; }
    .m-betterplace.f-orange .a-buttonlink { background:white; color:#5A00D8; border-color:white; }
    .m-betterplace.f-orange .a-buttonlink:focus { box-shadow:0 0 0 2px #F39019, 0 0 0 4px white; }
    .m-betterplace .a-donationprocess { margin-bottom:0; color:#ffac35; }
    .m-betterplace.f-orange .a-donationprocess { color:inherit; opacity:.8; }
    .m-betterplace .a-donationtext { margin-top:1rem; }