@charset "UTF-8";
* {
  box-sizing: border-box;
}

/* Typography */
/* Spacing */
/* 851px */
/* font-size */
/*

clamp(kleinste Schriftgröße, calc(px Abweichung von Soll Beginn Skallierung), größte Schriftgröße)

px Abweichung von Soll Beginn Skallierung = 16.5px - px Schriftgröße rechnerisch bei Beginn Skallierung
px Schriftgröße rechnerisch bei Beginn Skallierung = Wachstumseinheit pro Pixel px * Beginn Skallierung

Wachstumseinheit pro Pixel px = px Bandbreite Schriftskallierung / px Bandbreite über welche die Skallierung erfolgt
Beginn Skallierung
px Bandbreite Schriftskallierung = Maximale Schriftgröße - Minimale Schriftgröße
px Bandbreite über welche die Skallierung erfolgt = Ende Skallierung - Beginn Skallierung

*/
/* SASS-Variables font-weight*/
/* Colors */
/* Nuances */
/* Border */
/* 23px / 1.5px */
/*Typografie*/
/* Fonts */
/**
 * @license
 *
 * Font Family: Synonym
 * Designed by: Hugo Dumont
 * URL: https://www.fontshare.com/fonts/synonym
 * © 2021 Indian Type Foundry
 *
 * Font Styles:
 * Synonym Variable(Variable font)
 * Synonym Extralight
 * Synonym Light
 * Synonym Regular
 * Synonym Medium
 * Synonym Semibold
 * Synonym Bold
 *
*/
/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 700.0;
*
* available axes:

* 'wght' (range from 200.0 to 700.0)

*/
@font-face {
  font-family: "Synonym";
  src: url("../fonts/Synonym-Variable.woff2") format("woff2"), url("../fonts/Synonym-Variable.woff") format("woff"), url("../fonts/Synonym-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Synonym";
  src: url("../fonts/Synonym-Extralight.woff2") format("woff2"), url("../fonts/Synonym-Extralight.woff") format("woff"), url("../fonts/Synonym-Extralight.ttf") format("truetype");
  font-weight: 200; /* Extra Light */
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Synonym";
  src: url("../fonts/Synonym-Light.woff2") format("woff2"), url("../fonts/Synonym-Light.woff") format("woff"), url("../fonts/Synonym-Light.ttf") format("truetype");
  font-weight: 300; /* Light*/
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Synonym";
  src: url("../fonts/Synonym-Regular.woff2") format("woff2"), url("../fonts/Synonym-Regular.woff") format("woff"), url("../fonts/Synonym-Regular.ttf") format("truetype");
  font-weight: 400; /* Regular */
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Synonym";
  src: url("../fonts/Synonym-Medium.woff2") format("woff2"), url("../fonts/Synonym-Medium.woff") format("woff"), url("../fonts/Synonym-Medium.ttf") format("truetype");
  font-weight: 500; /* Medium */
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Synonym";
  src: url("../fonts/Synonym-Semibold.woff2") format("woff2"), url("../fonts/Synonym-Semibold.woff") format("woff"), url("../fonts/Synonym-Semibold.ttf") format("truetype");
  font-weight: 600; /* Semibold */
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Synonym";
  src: url("../fonts/Synonym-Bold.woff2") format("woff2"), url("../fonts/Synonym-Bold.woff") format("woff"), url("../fonts/Synonym-Bold.ttf") format("truetype");
  font-weight: 700; /* Bold */
  font-display: swap;
  font-style: normal;
}
/* Schriftschnitte als Klassen */
.font-extralight, .font-weight-200 {
  font-weight: 200;
}

.font-light, .font-weight-300 {
  font-weight: 300;
}

.font-regular, .font-weight-400 {
  font-weight: 400;
}

.font-medium, .font-weight-500 {
  font-weight: 500;
}

.font-semibold, .font-weight-600 {
  font-weight: 600;
}

.font-bold, .font-weight-700 {
  font-weight: 700;
}

.p, :root {
  font-size: clamp(16.5px, calc(13.1854990584px + 1.3185499058vw), 22px);
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 0.007em;
  text-align: justify;
}

/* Headings */
h1, .h1 {
  font-size: 4rem;
  line-height: 1.086em;
  font-weight: 200;
  font-weight: 230;
  letter-spacing: -0.06em;
  color: var(--accent-color);
}

h2, .h2 {
  font-size: 2.913rem;
  line-height: 1.194em;
  font-weight: 300;
  font-weight: 320;
  letter-spacing: -0.04em;
}

h3, .h3, article.second-level header h2.title {
  font-size: 2.043rem;
  line-height: 1.276em;
  font-weight: 400;
  letter-spacing: -0.02em;
}

h4, .h4, article.second-level header h3.subtitle, article.first-level.preview header h3.subtitle {
  font-size: 1.347rem;
  line-height: 1.612em;
  font-weight: 500;
  font-weight: 480;
}

h5, .h5 {
  font-size: 1rem;
  line-height: 1.75rem;
}

h6, .h6, article.fourth-level header h2.title, article.third-level header h2.title {
  font-size: 1rem;
  line-height: 1.75rem;
  text-align: left;
}

strong, .strong, b, .b, h5, .h5, h6, .h6, article.fourth-level header h2.title, article.third-level header h2.title {
  font-weight: 600;
  font-weight: 550;
}

.text-center, article.first-level.preview header p.categories, h1, .h1, h2, .h2, h3, .h3, article.second-level header h2.title, h4, .h4, article.second-level header h3.subtitle, article.first-level.preview header h3.subtitle, h5, .h5 {
  text-align: center;
}

h6 {
  margin: 1em 0 0 0;
}

.font-small, .small-b, article.preview header p.categories, .hashtag, .category, blockquote footer, strong small, strong .small, strong article.fourth-level header, article.fourth-level strong header, strong figcaption, .strong small, .strong .small, .strong article.fourth-level header, article.fourth-level .strong header, .strong figcaption,
.strong .figcaption, b small, b .small, b article.fourth-level header, article.fourth-level b header, b figcaption, .b small, h5 small, .h5 small, h6 small, .h6 small, article.fourth-level header h2.title small, article.third-level header h2.title small, .b .small, .b article.fourth-level header, article.fourth-level .b header, .b figcaption,
.b .figcaption, h5 .small, h5 article.fourth-level header, article.fourth-level h5 header, .h5 .small, .h5 article.fourth-level header, article.fourth-level .h5 header, .h5 figcaption, h6 .small, h6 article.fourth-level header, article.fourth-level h6 header, .h6 .small, article.fourth-level header h2.title .small, .h6 article.fourth-level header, article.fourth-level header h2.title article.fourth-level header, article.fourth-level .h6 header, article.fourth-level header h2.title header, article.third-level header h2.title .small, article.third-level header h2.title article.fourth-level header, article.fourth-level article.third-level header h2.title header, .h6 figcaption, article.fourth-level header h2.title figcaption, article.third-level header h2.title figcaption, small strong, small .strong, small b, small .b, small h5, small .h5, small h6, small .h6, small article.fourth-level header h2.title, article.fourth-level header small h2.title, .small strong, article.fourth-level header strong, article.third-level header strong, figcaption strong,
.figcaption strong, .small .strong, article.fourth-level header .strong, article.third-level header .strong, figcaption .strong,
.figcaption .strong, .small b, article.fourth-level header b, article.third-level header b, figcaption b,
.figcaption b, .small .b, article.fourth-level header .b, article.third-level header .b, figcaption .b,
.figcaption .b, .small h5, article.fourth-level header h5, article.third-level header h5, figcaption h5,
.figcaption h5, .small .h5, article.fourth-level header .h5, article.third-level header .h5, figcaption .h5,
.figcaption .h5, .small h6, article.fourth-level header h6, article.third-level header h6, figcaption h6,
.figcaption h6, .small .h6, .small article.fourth-level header h2.title, article.fourth-level header .small h2.title, article.fourth-level header .h6, article.fourth-level header h2.title, article.third-level header .h6, article.third-level article.fourth-level header h2.title, article.fourth-level article.third-level header h2.title, article.third-level header h2.title, figcaption .h6, figcaption article.fourth-level header h2.title, article.fourth-level header figcaption h2.title,
.figcaption .h6,
.figcaption article.fourth-level header h2.title,
article.fourth-level header .figcaption h2.title, small, .small, article.fourth-level header, article.third-level header, figcaption,
.figcaption {
  font-size: 0.783rem;
}

p, h1, h2, h3, h4, h5, h6, ul, ol, a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

small, .small, article.fourth-level header, article.third-level header, figcaption,
.figcaption {
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: left;
}

.small-b, article.preview header p.categories, .hashtag, .category, blockquote footer, strong small, strong .small, strong article.fourth-level header, article.fourth-level strong header, strong article.third-level header, article.third-level strong header, strong figcaption,
strong .figcaption, .strong small, .strong .small, .strong article.fourth-level header, article.fourth-level .strong header, .strong article.third-level header, article.third-level .strong header, .strong figcaption,
.strong .figcaption, b small, b .small, b article.fourth-level header, article.fourth-level b header, b article.third-level header, article.third-level b header, b figcaption,
b .figcaption, .b small, h5 small, .h5 small, h6 small, .h6 small, article.fourth-level header h2.title small, article.third-level header h2.title small, .b .small, .b article.fourth-level header, article.fourth-level .b header, .b article.third-level header, article.third-level .b header, .b figcaption,
.b .figcaption, h5 .small, h5 article.fourth-level header, article.fourth-level h5 header, h5 article.third-level header, article.third-level h5 header, h5 figcaption,
h5 .figcaption, .h5 .small, .h5 article.fourth-level header, article.fourth-level .h5 header, .h5 article.third-level header, article.third-level .h5 header, .h5 figcaption,
.h5 .figcaption, h6 .small, h6 article.fourth-level header, article.fourth-level h6 header, h6 article.third-level header, article.third-level h6 header, h6 figcaption,
h6 .figcaption, .h6 .small, article.fourth-level header h2.title .small, .h6 article.fourth-level header, article.fourth-level header h2.title article.fourth-level header, article.fourth-level .h6 header, article.fourth-level header h2.title header, article.third-level header h2.title .small, article.third-level header h2.title article.fourth-level header, article.fourth-level article.third-level header h2.title header, .h6 article.third-level header, article.fourth-level header h2.title article.third-level header, article.third-level header h2.title article.third-level header, article.third-level .h6 header, article.third-level article.fourth-level header h2.title header, article.fourth-level header article.third-level h2.title header, article.third-level header h2.title header, .h6 figcaption, article.fourth-level header h2.title figcaption, article.third-level header h2.title figcaption,
.h6 .figcaption,
article.fourth-level header h2.title .figcaption,
article.third-level header h2.title .figcaption, small strong, small .strong, small b, small .b, small h5, small .h5, small h6, small .h6, small article.fourth-level header h2.title, article.fourth-level header small h2.title, small article.third-level header h2.title, article.third-level header small h2.title, .small strong, article.fourth-level header strong, article.third-level header strong, figcaption strong,
.figcaption strong, .small .strong, article.fourth-level header .strong, article.third-level header .strong, figcaption .strong,
.figcaption .strong, .small b, article.fourth-level header b, article.third-level header b, figcaption b,
.figcaption b, .small .b, article.fourth-level header .b, article.third-level header .b, figcaption .b,
.figcaption .b, .small h5, article.fourth-level header h5, article.third-level header h5, figcaption h5,
.figcaption h5, .small .h5, article.fourth-level header .h5, article.third-level header .h5, figcaption .h5,
.figcaption .h5, .small h6, article.fourth-level header h6, article.third-level header h6, figcaption h6,
.figcaption h6, .small .h6, .small article.fourth-level header h2.title, article.fourth-level header .small h2.title, article.fourth-level header .h6, article.fourth-level header h2.title, .small article.third-level header h2.title, article.fourth-level header article.third-level header h2.title, article.third-level header .small h2.title, article.third-level header article.fourth-level header h2.title, article.fourth-level article.third-level header header h2.title, article.third-level header .h6, article.third-level article.fourth-level header h2.title, article.fourth-level article.third-level header h2.title, article.third-level header h2.title, figcaption .h6, figcaption article.fourth-level header h2.title, article.fourth-level header figcaption h2.title, figcaption article.third-level header h2.title, article.third-level header figcaption h2.title,
.figcaption .h6,
.figcaption article.fourth-level header h2.title,
article.fourth-level header .figcaption h2.title,
.figcaption article.third-level header h2.title,
article.third-level header .figcaption h2.title {
  font-weight: 600;
  letter-spacing: 0.015em;
  text-align: left;
}

.lowercase {
  text-transform: lowercase;
}

.intro, article.first-level.preview header p.introtext, blockquote p {
  font-size: 1.478rem;
  line-height: 1.47em;
  font-weight: 300;
  letter-spacing: -0.04em;
}

.quotation, blockquote p::after, blockquote p::before {
  content: var(--quotation, '"');
  color: var(--accent-color);
  font-weight: 200;
  font-size: 4rem;
  line-height: 1rem;
  position: relative;
  bottom: -0.2rem;
  vertical-align: baseline;
  bottom: -0.6rem;
}

blockquote p {
  text-align: center;
  margin-bottom: 0.4em;
}
blockquote p::before {
  --quotation: "» ";
}
blockquote p::after {
  --quotation: " «";
}
blockquote footer {
  color: var(--accent-color);
}

::selection, mark, .mark {
  color: var(--bg-color);
  background-color: var(--accent-color);
  padding: 0.3em;
}

:root {
  font-family: "Synonym", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  scroll-behavior: smooth;
  font-size: clamp(16.5px, calc(13.1854990584px + 1.3185499058vw), 22px);
  /* Variables */
  /* Colors */
  --white: #fff; /* var(--white) */
  --black: #140F0C; /* var(--black) */
  --beige: #F2E8DC; /* var(--beige) */
  --yellow: #D9A74A; /* var(--yellow) */
  --green: #3E5923; /* var(--green) */
  --red: #F25835; /* var(--red) */
  --transparent: transparent; /* var(--transparent) */
  --color: var(--black);
  --accent-color: var(--red);
  --bg-color: var(--beige);
  --border-width: 0.065rem;
  --line-height: 1.75rem; /* var(--line-height) */
  /* Spacing */
  --layout-spacing: max(8vh, 3rem); /* var(--layout-spacing) */
  --max-width: 851px; /* var(--max-width) */
  --li-spacing: "  ";
  --gap: 2rem;
  --p-grid: clamp(1rem, calc(12px +	1.187vw),	2rem);
  --min-col-width: 12rem;
  --max-col-width: 17rem;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  color: var(--color);
}

/* Spacing */
.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.w-fit {
  width: fit-content;
}

.w-min, #header a {
  width: min-content;
}

.w-max {
  width: max-content;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.min-h-full, main {
  min-height: 100%;
}

.h-min {
  height: min-content;
}

/* Margins */
.m-0, #header ul li, *, h6, .h6, article.fourth-level header h2.title, article.third-level header h2.title {
  margin: 0;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-4, article.first-level.preview header h2.title {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my-24 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.mt-0 {
  margin-top: 0;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-24 {
  margin-top: 6rem;
}

.mb-0, article.first-level.preview header p.categories {
  margin-bottom: 0;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-24 {
  margin-bottom: 6rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.m-p, ul li:not(:last-child),
ol li:not(:last-child), ul,
ol, h5, .h5, p {
  margin: 0 0 1.75rem;
}

.m-h, .box, .box-red, .box-green, .box-yellow, .box-beige, h1, .h1, h2, .h2, h3, .h3, article.second-level header h2.title, h4, .h4, article.second-level header h3.subtitle, article.first-level.preview header h3.subtitle, blockquote {
  margin: 1.75rem 0;
}

/* Paddings */
.p-0 {
  padding: 0;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-grid, article.first-level.preview header h2.title, .p-grid {
  padding-left: var(--p-grid);
  padding-right: var(--p-grid);
}

.py-grid, .p-grid {
  padding-top: var(--gap);
  padding-bottom: var(--gap);
}

/* Gaps */
.gap-x-4 {
  column-gap: 1rem;
}

.gap-x-6 {
  column-gap: 2rem;
}

.gap-x-8 {
  column-gap: 1.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.grid-center {
  display: grid;
  place-content: center;
}

u, .underline, a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--accent-color);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 0.45em;
}

a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  background-color: transparent; /* Remove the gray background on active links in IE 10. */
}

.no-underline, #header a, #footer a {
  text-decoration: none;
}

/* Grid */
.test-grid * {
  border: 1px solid red !important;
}

.grid, article.third-level, .third-level-grid, article.second-level, .article-grid, article.first-level {
  --min-column-width: 308px;
  --max-column-width: 374px;
  --row-gap: 0;
  --column-gap: 22px;
  --gap: var(--row-gap) var(--column-gap);
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: var(--gap);
  align-items: baseline;
}

.grid, article.third-level, .third-level-grid, article.second-level {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-width), 100%), var(--max-column-width, 1fr)));
  gap: var(--gap);
}

/* Columns

ml: Marginal left
mr: Marginal right
coll: Column left
colr: Column right
collr: Column left right
mr-colr: Marginal right and Column right
ml-coll: Marginal left and Column left
ml-mr: range from ml to mr 
col-full: span all

*/
/* Collection of Elements */
/*

from pictures srcset config.php
  '320w'
  '640w'
  '960w'
  '1280w'
  '1600w'
  '1920w'
*/
.px-grid, article.first-level.preview header h2.title, .p-grid {
  padding-left: var(--p-grid);
  padding-right: var(--p-grid);
}

.pb-grid, article.fourth-level {
  padding-bottom: var(--column-gap);
}

@media (max-width: calc(814px - 1px)) {
  .article-grid .px-grid, article.first-level .px-grid, article.first-level.preview header h2.title, .article-grid .p-grid, article.first-level .p-grid, .article-grid p, article.first-level p, .article-grid h1, article.first-level h1, .article-grid h2, article.first-level h2, .article-grid h3, article.first-level h3, .article-grid h4, article.first-level h4, .article-grid h5, article.first-level h5, .article-grid h6, article.first-level h6, .article-grid figcaption, article.first-level figcaption, .article-grid blockquote footer, article.first-level blockquote footer {
    padding-left: var(--p-grid);
    padding-right: var(--p-grid);
  }
  .article-grid > ul, article.first-level > ul, .article-grid > ol, article.first-level > ol {
    padding-right: var(--p-grid);
  }
}
@media screen and (min-width: 814px) and (max-width: calc(1606px - 1px)) {
  .article-grid, article.first-level {
    grid-template-columns: minmax(0, var(--max-col-width)) repeat(2, var(--max-col-width)) minmax(0, var(--max-col-width));
  }
  .ml, .mr, .ml-mr, .collr, article.first-level.preview header p.categories, figure.portrait img, figure.portrait figcaption, figure.landscape figcaption, p, h1, h2, h3, h4, h5, h6, ul, ol, figcaption, blockquote footer, iframe#instagram-embed-0 {
    grid-column: 2/4;
  }
  .coll, .ml-coll, .coll-coll {
    grid-column: 2/3;
    padding-left: var(--gap);
  }
  .colr, .mr-colr, .colr-colr {
    grid-column: 3/4;
    padding-right: var(--gap);
  }
  .col-full, article.first-level.preview header hr.separator, article.first-level.preview header h2.title, article hr.separator, figure.landscape img, figure {
    grid-column: 1/5;
  }
  .mrcolr {
    grid-column: 3/5;
  }
  .mlcoll {
    grid-column: 1/3;
  }
}
@media screen and (min-width: 1606px) {
  .article-grid, article.first-level {
    grid-template-columns: minmax(0, 1fr) repeat(4, var(--max-col-width)) minmax(0, 1fr);
  }
  .ml, .ml-coll, figure.landscape figcaption, p#hashtags {
    grid-column: 2/3;
  }
  .mr, figure.portrait figcaption {
    grid-column: 5/6;
  }
  .coll, .coll-coll {
    grid-column: 3/4;
  }
  .colr, .colr-colr {
    grid-column: 4/5;
  }
  .collr, article.first-level.preview header p.categories, figure.portrait img, p, h1, h2, h3, h4, h5, h6, ul, ol, figcaption, blockquote footer, iframe#instagram-embed-0 {
    grid-column: 3/5;
  }
  .col-full, article.first-level.preview header hr.separator, article.first-level.preview header h2.title, article hr.separator, figure.landscape img, figure {
    grid-column: 1/7;
  }
  .mr-colr {
    grid-column: 4/6;
  }
  .ml-coll {
    grid-column: 2/4;
  }
  .ml-mr {
    grid-column: 2/6;
  }
  p#hashtags {
    display: flex;
    flex-direction: column;
    place-self: baseline end;
    text-align: left;
    padding-right: var(--p-grid);
  }
  p.intro, article.first-level.preview header p.introtext {
    order: 5;
    align-self: baseline;
  }
}
iframe#instagram-embed-0 {
  max-width: 100vw;
}

/* Flex */
.flex, .footer-child, .footer-right, .footer-left {
  display: flex;
}

.flex-none {
  flex: none;
}

.flex-wrap, .footer-child, .footer-right, .footer-left {
  flex-wrap: wrap;
}

.content-center {
  align-content: center;
}

.self-center {
  align-self: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-self-end {
  justify-self: end;
}

.justify-self-center, iframe#instagram-embed-0 {
  justify-self: center;
}

.place-items-start {
  place-items: start;
}

.place-items-center {
  place-items: center;
}

.place-self-center {
  place-self: center;
}

.place-content-center {
  place-content: center;
}

.basis-1-5 {
  flex-basis: 20%;
}

.basis-4-5 {
  flex-basis: 80%;
}

.flex-1 {
  flex: 1 1 0%;
}

/* Colors */
.color {
  background-color: var(--color);
}

.bg-color, section.articles > :nth-child(odd) {
  background-color: var(--bg-color);
}

.accent-color, article.second-level header h2.title, article.first-level.preview header h2.title {
  color: var(--accent-color);
}

.white {
  color: #fff;
}

.black {
  color: #140F0C;
}

.beige {
  color: #F2E8DC;
}

.yellow {
  color: #D9A74A;
}

.green {
  color: #3E5923;
}

.red {
  color: #F25835;
}

/* Backgroundcolors */
.bg-bgcolor {
  background-color: var(--bg-color);
}

.bg-accent-color {
  background-color: var(--accent-color);
}

.bg-white {
  --bg-color: #fff;
  background-color: var(--bg-color);
}

.bg-black {
  --bg-color: #140F0C;
  background-color: var(--bg-color);
}

.bg-beige {
  --bg-color: #F2E8DC;
  background-color: var(--bg-color);
}

.bg-yellow {
  --bg-color: #D9A74A;
  background-color: var(--bg-color);
}

.bg-green {
  --bg-color: #3E5923;
  background-color: var(--bg-color);
}

.bg-red {
  --bg-color: #F25835;
  background-color: var(--bg-color);
}

.bg-tansparent {
  --bg-color: transparent;
  background-color: var(--bg-color);
}

.bg-yellow {
  --accent-color: var(--beige);
}

.bg-green, .bg-red {
  color: var(--beige);
  --accent-color: var(--black);
}

.bg-black-t20 {
  background-color: rgba(20, 15, 12, 0.2);
}

/* SVGs */
.fill-white {
  fill: #fff;
}

.fill-black {
  fill: #140F0C;
}

.fill-beige {
  fill: #F2E8DC;
}

.fill-yellow {
  fill: #D9A74A;
}

.fill-green {
  fill: #3E5923;
}

.fill-red {
  fill: #F25835;
}

#footer {
  --bg-color: #F2E8DC;
  background-color: var(--bg-color);
  margin-top: auto;
}
/* Images */
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  vertical-align: middle;
}

img {
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  /* Remove the border on images inside links in IE 10. */
  border-style: none;
}

figcaption,
.figcaption {
  margin: -0.25rem 0 1.75rem;
}

img {
  padding-bottom: 0.75rem;
}

img {
  height: 100%;
}

.headcover {
  width: 100%;
  height: 56.25vw;
}

figure.portrait figcaption {
  align-self: end;
}

picture, figure {
  display: contents;
}

article.preview:not(.first-level) picture {
  display: block;
}

/* Icons */
.span-icon::before, .hashtag::before, .category::before {
  color: var(--accent-color);
  content: var(--icon, "#") var(--li-spacing);
}

.category {
  --icon: "•";
}

.hashtag {
  --icon: "#";
}

svg.icon {
  width: 2.04rem; /* reltative size to nomal font-size*/
}
svg.icon .fill-accent-color { /* basic color, no effects */
  fill: var(--accent-color);
}
svg.icon .fill-accent-color-hover { /* basic transparent, fill on effect */
  fill: var(--accent-color);
  opacity: 0;
  transition: opacity ease 0.2s;
}
svg.icon .fill-accent-color-hover-transparent { /* basic color, transparent on effect */
  fill: var(--accent-color);
  opacity: 1;
  transition: opacity ease 0.2s;
}
svg.icon:hover .fill-accent-color-hover { /* fill-color on effect */
  opacity: 1;
}
svg.icon:hover .fill-accent-color-hover-transparent { /* transparency on effect */
  opacity: 0;
}

svg.texticon {
  position: relative; /* to be able to move item*/
  vertical-align: bottom;
  bottom: -0.2rem;
}

/* Gallery */
.gallery {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: flex-start;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.5rem;
}
.gallery img {
  margin: 0;
  scroll-snap-align: start;
  width: auto;
  height: 25rem;
  margin-bottom: 0.5rem;
  max-height: 90vh;
  max-width: 90vw;
  padding-bottom: 0;
}

/* Forms */
button,
input {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  accent-color: var(--accent-color);
}

input:focus {
  outline: var(--accent-color);
}

input::placeholder {
  color: var(--accent-color);
  opacity: 1;
}

button.transparent {
  background-color: transparent;
  border: none;
}

.cursor-pointer, button:hover {
  cursor: pointer;
}

#searchicon {
  position: relative;
}

#searchform {
  z-index: 999;
}

.overlay {
  position: fixed;
  z-index: 998;
  top: 0;
  left: 0;
}

div.clicklayer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 981;
}

.relative {
  position: relative;
}

.hidden, article.fourth-level header h3.subtitle, article.fourth-level header p.introtext, article.fourth-level header p.categories, article.third-level header h3.subtitle, article.third-level header p.introtext, article.second-level header p.intro-small, article.first-level.preview header p.intro-small {
  display: none;
}

.contents, article.first-level.preview header {
  display: contents;
}

.overflow-x-auto {
  overflow-x: auto;
}

/* Border */
.border-basic {
  --border-color: var(--beige);
  border: 0.065rem solid var(--border-color);
  border-radius: 0.13rem;
}

/*Nach-Oben-Button*/
#TopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 5.04rem; /* 1rem padding footer bottom + 2.04rem height icon + 0.5rem gap iconslist # */
  right: var(--p-grid); /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  cursor: pointer;
}

@media screen and (max-width: 540px) {
  #TopBtn {
    bottom: 7.58rem;
  }
}
/* Boxes */
.box, .box-red, .box-green, .box-yellow, .box-beige {
  background-color: var(--bg-color);
  color: var(--color);
  padding: 1rem 0;
}

.box-beige {
  --bg-color: var(--beige);
}

.box-yellow {
  --bg-color: var(--yellow);
  --accent-color: var(--white);
}

.box-green {
  --bg-color: var(--green);
  --accent-color: var(--black);
  --color: var(--beige);
}

.box-red {
  --bg-color: var(--red);
  --accent-color: var(--black);
  --color: var(--white);
}

#header {
  --bg-color: #F2E8DC;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 960px) {
  #header {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    align-content: center;
  }
  #menu {
    order: -1;
    justify-self: start;
  }
  #menu ul {
    justify-content: flex-start;
  }
}
ul,
ol {
  --p-li: 2rem; /* padding-left for ul ol parent */
  --ul-marker: "-";
  /* set padding-left */
  padding: 0 0 0 var(--p-li);
  /* setting margin bottom the same like as in paragraphs */
}
.article-grid ul, article.first-level ul,
.article-grid .ul,
article.first-level .ul,
.article-grid ol,
article.first-level ol,
.article-grid .ol,
article.first-level .ol {
  --p-li: calc(2rem + var(--p-grid));
}

ol ul, ol .ul, ol ol, ol .ol, ul ul, ul .ul, ul ol, ul .ol {
  /* remove margin-bottom and padding right at nested lists */
  margin-bottom: 0;
  padding-right: 0;
}

::marker {
  color: var(--accent-color);
}

ol li::marker {
  content: counter(list-item) "." var(--li-spacing);
}

ul li::marker {
  content: var(--ul-marker, "-") var(--li-spacing, " ");
}

.list-none, #header ul,
.list-none li,
#header ul li {
  --p-li: 0rem;
  list-style-type: none;
  list-style: none;
}
.list-none::marker, #header ul::marker,
.list-none li::marker,
#header ul li::marker {
  content: "";
}

/* Lists */
ul,
ol {
  --p-li: 2rem; /* padding-left for ul ol parent */
  --ul-marker: "-";
  /* set padding-left */
  padding: 0 0 0 var(--p-li);
  /* setting margin bottom the same like as in paragraphs */
}
.article-grid ul, article.first-level ul,
.article-grid .ul,
article.first-level .ul,
.article-grid ol,
article.first-level ol,
.article-grid .ol,
article.first-level .ol {
  --p-li: calc(2rem + var(--p-grid));
}

ol ul, ol .ul, ol ol, ol .ol, ul ul, ul .ul, ul ol, ul .ol {
  /* remove margin-bottom and padding right at nested lists */
  margin-bottom: 0;
  padding-right: 0;
}

::marker {
  color: var(--accent-color);
}

ol li::marker {
  content: counter(list-item) "." var(--li-spacing);
}

ul li::marker {
  content: var(--ul-marker, "-") var(--li-spacing, " ");
}

.list-none, #header ul,
.list-none li,
#header ul li {
  --p-li: 0rem;
  list-style-type: none;
  list-style: none;
}
.list-none::marker, #header ul::marker,
.list-none li::marker,
#header ul li::marker {
  content: "";
}

/* article */
article {
  --accent-color: var(--yellow);
  --bg-color: var(--beige);
}
article hr.separator {
  border: none;
  margin-bottom: 1rem;
}

p#hashtags a:not(:last-child), .iconlist a:not(:last-child) {
  margin-right: 0.5em;
}

article.first-level.preview {
  padding-bottom: 1.5rem;
}
article.first-level.preview header h3.subtitle {
  margin-top: 0.5rem !important;
}
article.first-level.preview header hr.separator {
  margin-bottom: 1rem;
}
article.second-level {
  --min-column-width: 2 * 374px;
  --max-column-width: 1fr;
  --column-gap: 33px;
  align-items: center;
  margin-bottom: 1.5rem;
}
article.second-level header p.categories {
  margin: 0;
  text-align: center;
}
article.second-level header h2.title {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
article.second-level header h3.subtitle {
  margin-top: 0.5rem !important;
}
@media screen and (min-width: 1606px) {
  article.second-level:nth-child(even) header {
    order: 1;
  }
  article.second-level:nth-child(even) picture {
    order: 2;
  }
  article.second-level:nth-child(odd) header {
    order: 2;
  }
  article.second-level:nth-child(odd) picture {
    order: 1;
  }
}
.third-level-grid {
  --min-column-width: 2 * 308px;
  --max-column-width: 1fr;
  column-gap: 1rem;
  align-items: start;
}

article.third-level {
  margin-bottom: 1.5rem;
}
article.third-level > * {
  width: 100%;
  max-width: 374px;
  height: 100%;
}
article.third-level header {
  width: 100%;
}
article.third-level header p.categories {
  margin-top: 0;
}
article.third-level img {
  max-height: 287px;
}

article.fourth-level {
  width: 100%;
  max-width: 374px;
  height: fit-content;
  flex: none;
}
article.fourth-level img {
  margin-bottom: var(--gap);
  aspect-ratio: 3/2;
}
#categories-related * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#related-articles {
  justify-content: flex-start;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.5rem;
}
#related-articles .fourth-level {
  width: 90%;
  max-width: calc(374px - 20px);
}/*# sourceMappingURL=index.css.map */