:root {
    --ff-sans-serif:"Roboto" ,ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-lineheight-3:1.5;
    --gap:var(--size-3);
    --size-4:1.25rem;
    --paragraph-space:var(--size-3);
    --ff-headings:"Roboto Condensed" ,ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-weight-3:300;
    --font-lineheight-1:1.25;
    --size-7:2rem;
    --size-6:1.75rem;
    --size-5:1.5rem;
    --border-size-3:5px;
    --clr-b-white:hsl(0, 0%, 100%);
    --size-3:1rem;
    --font-size-3:1.25rem;
    --clr-b-yellow:hsl(45, 100%, 61%);
    --radius-3:1rem;
    --clr-b-black:hsl(0, 0%, 0%);
    --clr-b-red:hsl(4, 100%, 63%);
    --size-2:.5rem;
    --size-9:4rem;
}
/* Import Reset and some general styles */
/* latin */
@font-face {
    font-display:swap;
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	src: url('../../files/layout/fonts/Roboto-400-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-display:swap;
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 700;
	src: url('../../files/layout/fonts/Roboto-700-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-display:swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../../files/layout/fonts/Roboto-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-display:swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url('../../files/layout/fonts/Roboto-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ../fonts */
@font-face {
    font-display:swap;
	font-family: 'Roboto Condensed';
	font-style: italic;
	font-weight: 300;
	src: url('../../files/layout/fonts/RobotoCondensed-300-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-display:swap;
	font-family: 'Roboto Condensed';
	font-style: italic;
	font-weight: 400;
	src: url('../../files/layout/fonts/RobotoCondensed-400-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-display:swap;
	font-family: 'Roboto Condensed';
	font-style: italic;
	font-weight: 700;
	src: url('../../files/layout/fonts/RobotoCondensed-700-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-display:swap;
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 300;
	src: url('../../files/layout/fonts/RobotoCondensed-300.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-display:swap;
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src: url('../../files/layout/fonts/RobotoCondensed-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-display:swap;
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	src: url('../../files/layout/fonts/RobotoCondensed-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ------------------ */
/* Reset              */
/* ------------------ */
/* https://piccalil.li/blog/a-modern-css-reset/ */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
picture,
figcaption,
blockquote,
ul,
ol,
dl,
dd {
  margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
/* ul[role="list"],
ol[role="list"] {
  list-style: none;
} */
/* ------------------------------------------------------------ */
/* Set core root defaults                                       */
/* Smooth Scroll only, when focus is in page                    */
/* this solution works with anchor links also, see              */
/* https://schepp.dev/posts/smooth-scrolling-and-page-search/   */
/* ------------------------------------------------------------ */
@-webkit-keyframes smoothscroll1 {
  from, to { scroll-behavior: smooth; }
}
@keyframes smoothscroll1 {
  from, to { scroll-behavior: smooth; }
}
@-webkit-keyframes smoothscroll2 {
  from, to { scroll-behavior: smooth; }
}
@keyframes smoothscroll2 {
  from, to { scroll-behavior: smooth; }
}
html {
  -webkit-animation: smoothscroll1 1s;
          animation: smoothscroll1 1s;
}
html[focus-within] {
  -webkit-animation-name: smoothscroll2;
          animation-name: smoothscroll2;
  scroll-behavior: smooth;
}
html:focus-within {
  -webkit-animation-name: smoothscroll2;
          animation-name: smoothscroll2;
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  font-family: var(--ff-sans-serif);
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: var(--font-lineheight-3);
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-3);
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html[focus-within] {
   scroll-behavior: auto;
  }
  html:focus-within {
   scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ------------------- */
/* Utility classes     */
/* ------------------- */
/* general */
.flex > .article-wrapper {
    display: flex;
    gap: 1rem;
    gap: var(--gap, 1rem);
}
.grid > .article-wrapper {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
    grid-gap: 1rem;
    grid-gap: var(--gap, 1rem);
    gap: var(--gap, 1rem);
}
.text-grid {
  --gap: 2em;
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-gap: 1rem;
  grid-gap: var(--gap, 1rem);
  gap: var(--gap, 1rem);
  grid-row-gap: 0;
  grid-template-areas:
        "text image";
}
.h-text-grid {
  grid-template-areas: 
        "heading image"
        "text image";
}
.reverse {
  grid-template-areas: 
        "image heading"
        "image text";
}
.text-grid > .rte {
  grid-area: text;
  align-self: center;
}
.text-grid.h-text-grid > .rte {
  grid-area: text;
  align-self: unset;
}
.text-grid > figure {
  grid-area: image;
  justify-self: center;
}
.h-text-grid > h3 {
  grid-area: heading;
}
/* vertikaler Rhythmus für Kindelemente eines Artikels */
/* https://piccalil.li/quick-tip/flow-utility/ */
.article-wrapper {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  padding-left: var(--size-4, 1.5rem);
  padding-right: 1.5rem;
  padding-right: var(--size-4, 1.5rem);
  margin-left: auto;
  margin-right: auto;
  max-width: 60rem; /* edit this one, if needed */
}
.article-wrapper > *:where(:not(:first-child)) {
  margin-top: 1.5rem;
}
/* Abstand für aufeinanderfolgende Absätze */
p,
ul,
ol,
blockquote {
  margin-top: 1rem;
  margin-top: var(--paragraph-space, 1rem);
}
p:where(:first-child) {
  margin-top: 0;
}
.invisible {
  position: absolute; 
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; 
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  }
/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--ff-headings);
    font-weight: var(--font-weight-3);
    line-height: var(--font-lineheight-1);
}
h1 {
    font-size: var(--size-7);
}
h2 {
    font-size: var(--size-6);
}
h3 {
    font-size: var(--size-5);
}
blockquote {
    font-style: italic;
    border-left: var(--border-size-3) solid var(--clr-b-white);
    padding-left: var(--size-3);
    padding-right: var(--size-3);
}
.lead {
    font-size: var(--font-size-3);
}
.yellow {
    color: var(--clr-b-yellow);
}
/* .image_container { */
/*    display: inline-block; */
/*    border-radius: var(--radius-3); */
/*    overflow: hidden; */
/* } */ 
.mod_article {
    min-height: 100vh;
    display: grid;
    align-content: center;
    padding-top: var(--size-5);
    padding-bottom: var(--size-5);
    color: var(--clr-b-white);
}
.mod_article:nth-child(3n - 2) {
    background-color: var(--clr-b-black);
}
.mod_article:nth-child(3n - 1) {
    background-color: var(--clr-b-yellow);
    color: var(--clr-b-black);
}
.mod_article:nth-child(3n) {
    background-color: var(--clr-b-red);
}
a {
    text-decoration: none;
}
.btn a {
    padding: var(--size-2) var(--size-3);
    border-radius: var(--radius-3);
}
a svg {
    width: var(--size-7);
    height: var(--size-7);
}
.mod_article:nth-child(3n - 2) a {
    color: var(--clr-b-yellow);
}
.mod_article:nth-child(3n - 1) a {
    color: var(--clr-b-red);
}
.mod_article:nth-child(3n) a {
    color: var(--clr-b-black);
}
.mod_article:nth-child(3n - 2) .btn a {
    color: var(--clr-b-black);
    background-color: var(--clr-b-yellow);
}
.mod_article:nth-child(3n) .btn a {
    color: var(--clr-b-red);
    background-color: var(--clr-b-black);
}
.ce_hyperlink {
    margin-top: var(--size-7);
}
.arrow-center {
    text-align: center;
    margin-top: var(--size-9);
}
.arrow-center svg {
    width: var(--size-9);
    height: var(--size-9);
}
/* COMPONENTS */
/*
@import "components/media";
@import "components/links";
@import "components/navs";
@import "components/slider";
@import "components/news";
@import "components/events";
@import "components/forms";
@import "components/accordion";
@import "components/downloads";
@import "components/tables";
@import "components/newsletter";
@import "components/faq";
@import "components/comments";
@import "components/search";

@import 'components/z_logo';

@import 'components/primary-navigation';

@import 'components/accordion';
@import 'components/alerts';
@import 'components/buttons';
@import 'components/card';
@import 'components/search';
*/