@font-face { font-family: "BM Arbeiter Neue-Mono"; src: url("https://ein-anderes-duisburg.de/fonts/BMArbeiterNeue-Mono.woff") format("woff"), url("https://ein-anderes-duisburg.de/fonts/BMArbeiterNeue-Mono.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "BM Arbeiter Neue-Regular"; src: url("https://ein-anderes-duisburg.de/fonts/BMArbeiterNeue-Mono.woff") format("woff"), url("https://ein-anderes-duisburg.de/fonts/BMArbeiterNeue-Mono.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Zetkin-Light"; src: url("https://ein-anderes-duisburg.de/fonts/Zetkin-Light.woff") format("woff"), url("https://ein-anderes-duisburg.de/fonts/Zetkin-Light.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Zetkin-Medium"; src: url("https://ein-anderes-duisburg.de/fonts/Zetkin-Medium.woff") format("woff"), url("https://ein-anderes-duisburg.de/fonts/Zetkin-Medium.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Zetkin-Regular"; src: url("https://ein-anderes-duisburg.de/fonts/Zetkin-Regular.woff") format("woff"), url("https://ein-anderes-duisburg.de/fonts/Zetkin-Regular.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Zetkin-Wide"; src: url("https://ein-anderes-duisburg.de/fonts/Zetkin-Wide.woff") format("woff"), url("https://ein-anderes-duisburg.de/fonts/Zetkin-Wide.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Zetkin-Bold"; src: url("https://ein-anderes-duisburg.de/fonts/Zetkin-Bold.woff") format("woff"), url("https://ein-anderes-duisburg.de/fonts/Zetkin-Bold.woff2") format("woff2"); font-display: swap; } :root { --primary: #790081; --secondary: #4BEDAA; --rot: #b10000; --schwarz: #000000; --weiss: #F3F3F3; --font-size-sm: clamp(0.8rem, -0.01vw + 0.8rem, 0.8rem); --font-size-base: clamp(1rem, 0.23vw + 0.94rem, 1.13rem); --font-size-md: clamp(1.25rem, 0.62vw + 1.1rem, 1.59rem); --font-size-lg: clamp(1.56rem, 1.25vw + 1.25rem, 2.25rem); --font-size-xl: clamp(1.95rem, 2.23vw + 1.4rem, 3.18rem); --font-size-xxl: clamp(2.44rem, 3.74vw + 1.51rem, 4.5rem); --font-size-xxxl: clamp(3.05rem, 6.01vw + 1.55rem, 6.36rem); --font-family-bm_arbeiter_neue-mono: "BM Arbeiter Neue-Mono", Helvetica; --font-family-bm_arbeiter_neue-regular: "BM Arbeiter Neue-Regular", Helvetica; --font-family-tg_frekuent_mono_trial-extrabold: "TG Frekuent Mono Trial-ExtraBold", Helvetica; --font-family-zetkin-light: "Zetkin-Light", Helvetica; --font-family-zetkin-medium: "Zetkin-Medium", Helvetica; --font-family-zetkin-regular: "Zetkin-Regular", Helvetica; --font-family-zetkin-wide: "Zetkin-Wide", Helvetica; --font-family-zetkin-bold: "Zetkin-Bold", Helvetica; }    html { line-height: 1.15;  -webkit-text-size-adjust: 100%;  }   body { margin: 0; } main { margin-bottom:128px; } ol, ul { list-style: none; padding:0px; }  main { display: block; }  h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin: 0; }   hr { box-sizing: content-box;  height: 0;  overflow: visible;  }  pre { font-family: monospace, monospace;  font-size: 1em;  }   a { background-color: transparent; }  abbr[title] { border-bottom: none;  text-decoration: underline;  text-decoration: underline dotted;  }  b, strong { font-weight: bolder; }  code, kbd, samp { font-family: monospace, monospace;  font-size: 1em;  }  small { font-size: 80%; }  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; }   img { border-style: none; }   button, input, optgroup, select, textarea { font-family: inherit;  font-size: 100%;  line-height: 1.15;  margin: 0;  }  button, input {  overflow: visible; }  button, select {  text-transform: none; }  button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }  button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }  button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }  fieldset { padding: 0.35em 0.75em 0.625em; }  legend { box-sizing: border-box;  color: inherit;  display: table;  max-width: 100%;  padding: 0;  white-space: normal;  }  progress { vertical-align: baseline; }  textarea { overflow: auto; }  [type="checkbox"], [type="radio"] { box-sizing: border-box;  padding: 0;  }  [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }  [type="search"] { -webkit-appearance: textfield;  outline-offset: -2px;  }  [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }  ::-webkit-file-upload-button { -webkit-appearance: button;  font: inherit;  }   details { display: block; }  summary { display: list-item; }   template { display: none; }  [hidden] { display: none; }  body { background-color: var(--weiss); } @media only screen and (min-width: 555px) and (max-width: 1023px) { body { padding-top: 86px; padding-bottom: 46px; } } @media only screen and (max-width: 555px) { body { padding-top: 101px; padding-bottom: 46px; } } @media (prefers-reduced-motion: reduce) { .fa-beat, .fa-beat-fade, .fa-bounce, .fa-fade, .fa-flip, .fa-pulse, .fa-shake, .fa-spin, .fa-spin-pulse { animation-delay: -1ms; -webkit-animation-duration: 2ms!important; animation-duration: 2s!important; animation-iteration-count: infinite!important; transition-delay: 0s; transition-duration: 0s; } } html, body { overflow-x: hidden; scroll-behavior: auto!important; } .prolog { height: auto; overflow: hidden; width: 100%; } .titel-section { display: flex; flex-direction: column; width: 100%; z-index: 1; word-wrap: break-word; overflow-wrap: break-word; } .subheadlines { display: flex; flex-direction: column; width: 100%; } .flexichange { flex-direction: row; align-items: center; gap:43px; } .container-lg p, p { margin:0px; } .textinhalt p:not(:first-child) { margin-top:32px; } .inverted { color: var(--secondary)!important; background-color: var(--primary)!important; border-color: var(--secondary)!important; } .inverted-shadow { box-shadow: -4px -4px 0px var(--secondary)!important; } .emptyplaceholder { width: 100%; height: 100%; min-width:520px; } .coating { width: 100%; position: relative; display: inline-block; } .invertedoverlay { position: absolute; top: 0; left: -100vw; width: 200vw; height: 100%; background-color: var(--primary); cursor: pointer; justify-content: center; align-items: center; pointer-events: none; color: var(--secondary); z-index: -1; } @media only screen and (min-width: 1024px) { .container-lg { margin-left: calc(50% - 43px); transform: translate(-50%, 0); width: calc(100% - 120px); } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .container-lg { transform: unset; margin-right: auto; margin-left: auto; } } @media only screen and (max-width: 767px) { .container-lg { transform: unset; margin-right: auto; margin-left: auto; } .flexichange { flex-direction: column; gap: 16px; } }  .xxxl { font-family: var(--font-family-bm_arbeiter_neue-regular); font-size: var(--font-size-xxxl); font-style: normal; font-weight: 400; letter-spacing: 0; } .xxl { font-family: var(--font-family-bm_arbeiter_neue-regular); font-size: var(--font-size-xxl); font-style: normal; font-weight: 400; letter-spacing: 0; } .xl { font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-xl); font-style: normal; font-weight: 400; letter-spacing: 0; } .lg { font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-lg); font-style: normal; font-weight: 400; letter-spacing: 0; } .md { font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-md); font-style: normal; font-weight: 400; letter-spacing: 0; } .base { font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-base); font-style: normal; font-weight: 400; letter-spacing: 0; } .sm { font-family: var(--font-family-zetkin-light); font-size: var(--font-size-sm); font-style: normal; font-weight: 300; letter-spacing: 0; } .xxxl-headline { -webkit-text-stroke: 1px var(--primary); color: var(--secondary); font-family: var(--font-family-bm_arbeiter_neue-mono); font-size: var(--font-size-xxl); font-weight: 400; line-height: 110%; } .xxl-subheadline-stroke { -webkit-text-stroke: 1px var(--primary); font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-lg); color: var(--secondary); font-weight: 400; line-height: normal; } .xxl-subheadline { color: var(--primary); font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-lg); font-weight: 400; line-height: normal; } .xl-ueberschrift-zetkin { color: var(--primary); font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-xl); font-weight: 400; line-height: 110%; } .xl-ueberschrift-arbeiter { color: var(--primary); font-family: var(--font-family-bm_arbeiter_neue-mono); font-size: var(--font-size-xl); font-weight: 400; line-height: 110%; } .lg-kleine-ueberschrift { color: var(--primary); font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-lg); font-weight: 400; line-height: 110%; } .md-grosser-fliesstext { color: var(--primary); font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-md); font-weight: 400; line-height: 150%; } container-lg p, .base-fliesstext { color: var(--primary); font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-base); font-weight: 400; line-height: 150%; } .coating .base-fliesstext, .coating .sm-kleine-auszeichnung, .coating .xl-ueberschrift-arbeiter, .coating .md-grosser-fliesstext, .coating .lg-kleine-ueberschrift { color: var(--secondary); } .max-600 { max-width:557px; } .fliesstext-stroke { color: var(--secondary); -webkit-text-stroke: 0.5px var(--primary); } .sm-kleine-auszeichnung { color: var(--primary); font-family: var(--font-family-zetkin-light); font-size: var(--font-size-sm); font-weight: 400; line-height: 110%; max-width:520px; } .bildunterschrift-links { white-space: pre-wrap; max-width: 540px; width: 100%; } .footer-menu a { text-decoration: none; color: var(--primary); }  .highlight { background: var(--secondary); }  .base-fliesstext a, .quellenangabe a, .customliststyle a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--secondary); text-decoration-thickness: 2px; transition: color 1s; transition-delay: 0.1s; } .base-fliesstext a:hover, .customliststyle a:hover { color: var(--secondary); text-decoration: underline; text-decoration-color: var(--secondary); text-decoration-thickness: 2px; } .base-fliesstext .glossarlink, .md-grosser-fliesstext .glossarlink, p.lg-kleine-ueberschrift > .glossarlink { position: relative; color: var(--primary); transition: color 1s, background 1s; transition-delay: 0.1s; display: inline-block; background: var(--secondary); text-decoration: none; cursor: pointer; line-height: 110%; transform: translate(0px, -26%); } .base-fliesstext .glossarlink span, .md-grosser-fliesstext .glossarlink span, p.lg-kleine-ueberschrift > .glossarlink span { position: relative; display: inline-block; transform: translate(0px, 26%); } .coating .base-fliesstext .glossarlink, .coating .md-grosser-fliesstext .glossarlink, .coating p.lg-kleine-ueberschrift > .glossarlink { color: var(--primary)!important; background: var(--secondary)!important; } .glossar { cursor: pointer; } .base-fliesstext .glossarlink:hover, .md-grosser-fliesstext .glossarlink:hover, p.lg-kleine-ueberschrift > .glossarlink:hover { color: var(--secondary); transition-delay: 0.1s; display: inline-block; background: var(--primary); text-decoration: none; } .coating .base-fliesstext .glossarlink:hover, .coating .md-grosser-fliesstext .glossarlink:hover, .coating p.lg-kleine-ueberschrift > .glossarlink:hover { color: var(--primary)!important; background: var(--weiss)!important; } .infront-img { height: calc( var(--font-size-lg) - 0.55rem); width: auto; }  button { padding: 15px 64px 12px 64px; width: auto; height: auto; color: var(--primary); background: var(--secondary); border: 1px solid var(--primary); border-radius: 16px!important; transition: background 1s, border 1s, color 1s; } button:hover { color: var(--secondary)!important; background: var(--primary); border: 1px solid var(--secondary); } button:active { color: var(--secondary); background: var(--primary); border: 1px solid var(--secondary); } @media (max-width: 767px) { button { padding: 15px 48px 12px 48px; } } @media (max-width: 479px) { button { padding: 15px 32px 12px 32px; } } .btn-episode { border-radius: 32px!important; background-color: var(--secondary); width: 164px; height: 164px; display: flex; justify-content: center; align-items: center; } .btn-episode a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--primary); } .btn-episode a:hover { color: var(--secondary)!important; }  blockquote::before { content: '“'; color: var(--secondary); font-family: var(--font-family-bm_arbeiter_neue-mono); font-size: 8rem; position: absolute; left:0px; top:0px; -webkit-transform: translate(-1rem, 2rem); -ms-transform: translate(-1rem, 2rem); transform: translate(-1rem, 2rem); }  .dynamic-after { color: var(--secondary); font-family: var(--font-family-bm_arbeiter_neue-mono); font-size: 8rem; -webkit-transform: translate(-3.5rem, 3rem); -ms-transform: translate(-3.5rem, 3rem); transform: translate(-3.5rem, 3rem); } .first-letter { margin-left:4.5rem; font-size: inherit; color: inherit; } .last-letter { margin-right: 3.5rem; } blockquote { position: relative; margin: 9px 0px!important; width:fit-content; } .blockquotewrapper { width: fit-content!important; max-width: 450px; margin-left: auto; margin-right: auto; } .alignright { text-align: right; } .zitat-autor { width: 100%; display: block; margin-top:16px; } .autor-right { text-align: right; } .zitat-autor::before { content: ''; }  .character { font-family: var(--font-family-zetkin-wide) } strong, .jahreszahl { font-family: var(--font-family-zetkin-bold); } .quellenangabe { display: flex; align-items: center; background-color: var(--secondary); border: 1px solid var(--primary); border-radius: 64px; justify-content: center; padding: 16px 64px; max-width:527px; position: relative; left: 50%; transform: translateX(-50%); } .quellen { width: 100%; margin: 0 auto; } .lit-quell { width: calc(100% - 76px); } .citationnumb { display: inline-block; width: 0px; text-align: center; white-space: nowrap; margin-right: 20px; } .overlap-quelle { background-color: var(--secondary); border-radius: 30px/25px; height: 20px; padding: 0 14px; padding: 0 9px; position: relative; } li { display: flex; align-items: baseline; margin-bottom:32px; } ul.customliststyle { list-style-type: none;  padding: 0; margin-left: auto!important; margin-right: auto!important; max-width: 557px; } ul.customliststyle li { color: var(--primary); font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-base); font-weight: 400; line-height: 150%; display:inline-block; padding-left: 20px;  position: relative;  } ul.customliststyle li:before { content: "\2022";  font-size: 20px;  position: absolute; left: 0; top: 0; } @media only screen and (min-width: 1024px) { li { margin-bottom:32px; } ul { margin-top:32px; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { li { margin-bottom:24px; } ul { margin-top:24px; } } @media only screen and (max-width: 767px) { li { margin-bottom:16px; } ul { margin-top:16px; } } .base-fliesstext { margin: 0; list-style-type: none; } .icon-quelle { display: inline-block; width: 18px; height: 27px;  background-size: cover; transform: translate(10px, 5px); margin-right: 20px!important; cursor: pointer; } .icon-quelle-out { display: inline-block; width: 18px; height: 27px; background-image: url("../img/nav/rechts.svg"); background-size: cover; transform: translate(10px, 5px); margin-right: 20px!important; cursor: pointer; } .episoden { gap: 32px; padding: 32px 0 0; justify-content: center; } .rectangle { background-color: var(--secondary); width: 164px; height: 164px; border: 1px solid var(--primary); border-radius: 32px; display: flex; justify-content: center; align-items: center; } .episodentitel { text-align: center; } .rectangle p { margin: 0; }  .infomarker { align-self: flex-end; background-color: var(--secondary); border: 1.5px solid; border-color: var(--secondary); padding: 6px 12px; transform: rotate(5.00deg); width: fit-content; margin-right: 1px; } .kapitelmarker { align-self: flex-end; background-color: var(--secondary); border: 1.5px solid; border-color: var(--primary); box-shadow: -4px -4px 0px var(--primary); padding: 6px 12px; transform: rotate(5.00deg); width: fit-content; margin-right: 5px; } .infomarker div, .kapitelmarker div, .jahreszahlmarker div { color: var(--primary); font-weight: 400; line-height: 27px; margin-top: 1.5px; position: relative; white-space: nowrap; width: fit-content; } .jahreszahlmarker { background-color: var(--secondary); border: 1.5px solid; border-color: var(--primary); box-shadow: -4px -4px 0px var(--primary); padding: 6px 12px; transform: rotate(-5.00deg); width: fit-content; margin-left: 7px; } @media (max-width: 767px) { .kapitelmarker, .jahreszahlmarker { padding: 5px 10px; } } @media (max-width: 479px) { .kapitelmarker, .jahreszahlmarker { padding: 4px 8px; } }  .h-0 { height:0px; } .spacing-above { margin-top: 96px!important; height:0px!important; } .spacing-quellen { margin-top: 96px!important; } .spacing-below { margin-bottom: 96px!important; height:0px!important; } .mtbg { margin-top: 64px!important; } .mt { margin-top: 32px!important; } .mtsm { margin-top: 24px!important; } .mtmin { margin-top: 12px!important; } .mbmin { margin-bottom: 12px!important; } .ptbg { padding-top: 64px!important; } .mb { margin-bottom: 32px!important; } .pb { padding-bottom: 32px!important; } .ptb { padding-top: 36px!important; } @media only screen and (min-width: 1024px) { .spacing-above { margin-top: 96px!important; height:0px!important; } .spacing-quellen { margin-top: 96px!important; } .spacing-below { margin-bottom: 96px!important; height:0px!important; } .textinhalt p:not(:first-child), .mt { margin-top:32px!important; } .inhalt-frame { padding: 32px 0px 0px 0px; } .mtbg { margin-top: 64px!important; } .mtsm { margin-top: 24px!important; } .mtmin { margin-top: 12px!important; } .mbmin { margin-bottom: 12px!important; } .ptbg { padding-top: 64px!important; } .pbg { padding-bottom: 64px!important; } .mb { margin-bottom: 32px!important; } .pb { padding-bottom: 32px!important; } .ptb { padding-top: 36px!important; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .spacing-above { margin-top: 80px!important; height:0px!important; } .spacing-quellen { margin-top: 80px!important; } .spacing-below { margin-bottom: 80px!important; height:0px!important; } .textinhalt p:not(:first-child), .mt { margin-top:24px!important; } .inhalt-frame { padding: 24px 0px 0px 0px; } .mtbg { margin-top: 48px!important; } .mtsm { margin-top: 24px!important; } .mtmin { margin-top: 12px!important; } .mbmin { margin-bottom: 12px!important; } .ptbg { padding-top: 48px!important; } .pbg { padding-bottom: 48px!important; } .mb { margin-bottom: 24px!important; } .pb { padding-bottom: 24px!important; } .ptb { padding-top: 28px!important; } } @media only screen and (max-width: 767px) { .spacing-above { margin-top: 64px!important; height:0px!important; } .spacing-quellen { margin-top: 64px!important; } .spacing-below { margin-bottom: 64px!important; height:0px!important; } .textinhalt p:not(:first-child), .mt { margin-top:16px!important; } .inhalt-frame { padding: 16px 0px 0px 0px; } .mtbg { margin-top: 32px!important; } .mtsm { margin-top: 16px!important; } .mtmin { margin-top: 8px!important; } .mbmin { margin-bottom: 8px!important; } .ptbg { padding-top: 32px!important; } .pbg { padding-bottom: 32px!important; } .mb { margin-bottom: 16px!important; } .pb { padding-bottom: 16px!important; } .ptb { padding-top: 20px!important; } } .mt-64 { margin-top: 64px; } .pt-64 { padding-top: 64px; } .mb-64 { margin-bottom: 64px; } .pb-64 { padding-bottom: 64px; } .mt-32 { margin-top: 32px; } .pt-32 { padding-top: 32px; } .mb-32 { margin-bottom: 32px; } .pb-32 { padding-bottom: 32px; } mb-16 { margin-bottom: 16px; } mt-16 { margin-top: 16px; }  .img-hoch { height: auto; border-radius: 25px; } .group img, .group iframe { object-fit: cover; border-radius: 25px; width: 520px; height:auto; } .group iframe { border-radius: 0!important; } .group { align-items: flex-start; display: flex; gap: 16px; } .img-full { max-width:100%!important; width:100%!important; } .img-triggerwarnung { position: relative; width: fit-content; z-index: 0; overflow: hidden; } .img-triggerwarnung::before { content: "Triggerwarnung! Auf diesem Dokument sind rassistische / sexistische / antisemitische / homophobe Inhalte zu sehen. Durch Tippen auf die Bildfläche können sie ausgeblendet werden."; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); padding: 32px; text-align: center; font-family: var(--font-family-zetkin-regular); font-size: var(--font-size-base); font-weight: 400; line-height: 150%; border-radius: 25px; opacity: 1; background-image: url(../img/nav/trigger.svg); background-size: 158px auto; background-repeat: no-repeat; background-position: center; z-index: 3; cursor: pointer; transition: opacity 0.5s ease; } @media only screen and (min-width: 768px) and (max-width: 1023px) { .group img, .group iframe { width: 420px!important; } .audioPlayer { min-width: 420px!important; } .group .img-full { max-width:100%!important; width:100%!important; } .img-hoch { width: 420px!important; } .thumbnail-inner { max-width: 420px!important; width:420px!important; } } @media (max-width: 767px) { .group img, .group iframe { width: 100%!important; } .group { width:100%; } .audioPlayer { min-width: unset!important; } .img-hoch, .img-full { max-width: 100%!important; padding-left: 0px; align-self: center; width:100vw!important; } .thumbnail-inner { max-width: 100%!important; padding-left: 0px; align-self: center; width:100%!important; } }  .video-player { position: relative; display: inline-block; } .mute { width: 25px; } @media (max-width: 767px) { .mute { display:none; } } .video-out { width: 100%; } .thumbnail { position: relative; overflow: hidden; } .thumbnail-inner { position: relative; width:520px; overflow: hidden; } .thumbnail-outer img { width: 100%!important; height: auto; border-radius: 0px!important; max-width:unset; } .thumbnail-inner img { width: 100%!important; height: auto; border-radius: 0px!important; max-width:unset; } .play-button { width: 64px; height: 64px; background-color: white; border: none; position: absolute; cursor: pointer; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 136px!important; padding: 0px!important; filter: drop-shadow(-3px 3px 12px rgba(0, 0, 0, 0.25)); } .play-button:hover { background-color: var(--secondary); border: var(--primary); } .play-button::before, .play-button::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .play-button::before { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent black; } .play-button::after { } video { display: none; width: 100%; height: auto; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; justify-content: center; align-items: center; pointer-events: none; color: var(--secondary); } .intext { width:520px; } @media (max-width: 767px) { .intext { width: 100%!important; } .max-600 { max-width: unset; } } .video-player.playing video { display: block; }  .video-player .controls { position: absolute; bottom: -1px; left: 0; right: 0; background-color: var(--secondary); display: none; z-index:1; gap: 12px; height: 32px; align-items: center; padding: 0px 5px; } .video-player .controls button { color: var(--primary); background-color: transparent; border: none; cursor: pointer; padding:unset; } .video-player .controls .progress-bar { background-color: #fff; width: 100%; height: 2px; cursor: pointer; } .video-player .controls .progress { width: 0; height: 100%; background:var(--primary); } .video-player .controls .volume-control { position: absolute; bottom: 90px; right: -16px; transform: rotate(-90deg); } .video-player .controls .volume-control .volume-slider { height:2px; color: var(--primary); }  .volume-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 25px; background: var(--secondary); outline: none; opacity: 0; -webkit-transition: .2s; transition: opacity .2s; }  .volume-slider:hover { opacity: 1; } .volume-wrap:hover .volume-slider { opacity:1; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 8px; height: 8px; border-radius: 50%; background-color: var(--secondary); cursor: pointer; } .volume-slider::-moz-range-thumb { width: 25px; height: 25px; background: #04AA6D; }   .list { display: flex; overflow-x: scroll; padding: 32px 20px; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; scroll-snap-type: x proximity; scroll-padding: 0 20px; list-style: none; background-color: var(--weiss); border-radius: 12px; } @media only screen and (min-width: 768px) and (max-width: 1023px) { .list {padding: 24px 10px!important;} } @media only screen and (max-width: 767px) { .list {padding: 16px 5px!important;} } .inverted .list, .inverted .galleryel { background-color: var(--primary); } .ankerdavor { height:0px; } .list::-webkit-scrollbar { display: none; } .item { position: relative; height: 420px; flex-shrink: 0; scroll-snap-align: center; overflow: hidden; display: flex; justify-content: center; align-items: center; color: var(--primary); font-size: var(--font-size-base); background: #E6E6E6; border: 1px solid var(--primary); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 25px; margin-left: 10px; } .item img, .item a, .item div { height: 100%; width: auto; border-radius: 0!important; } .item:last-child::after { position: absolute; left: 100%; height: 1px; width: 20px; display: block; content: ""; } .testoimg .item:nth-child(4n + 1) { width: 200px; } .testoimg .item:nth-child(4n + 2) { width: 400px; } .testoimg .item:nth-child(4n + 3) { width: 350px; } .testoimg .item:nth-child(4n + 4) { width: 200px; } .icons {  } .galleryel { background-color: var(--weiss); border-radius: 12px; } .filled, .empty { display: inline-block; width: 20px; height: 20px; background-size: cover; background-position: center; } .filled { background-image: url('../img/nav/gallery-filled.svg'); } .empty { background-image: url('../img/nav/gallery-epmty.svg'); } .inverted .filled, .inverted .empty { filter: invert(100%); } .triggerwarnung { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); display: flex; flex-direction: column; cursor: pointer; padding: 32px; gap: 32px; align-items: center; justify-content: center; border-radius: 16px; transition: opacity 0.5s ease; } .triggerwarnung img { width: 112px; height: auto; } .triggertext { color: #fff; text-align: center; }  .audioPlayer { width: 100%; margin-bottom: 1rem; min-width:520px; } #playerControls { display: flex; align-items: center; justify-content: center; gap: 5px; } .playButton-audio { width: 64px; height: 64px; background-color: var(--secondary); border: 1px solid var(--primary); border-radius: 50%!important; padding: 0; cursor: pointer; position: relative; } .playButton-audio:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent var(--primary); } .playButton-audio.playing:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 20px; background-color: var(--primary); border-radius: 2px; } .playButton-audio:hover { border-color: var(--primary); background-color: #fff; } .progressBarAudio { background-color: var(--secondary); width: calc(100% - 64px); height: 2px; position: relative; cursor: pointer; } .progressAudio { background-color: var(--primary); height: 100%; width: 0; position: relative; cursor: pointer; } .playPosition { position: absolute; top: -3px; left: 0px; transform: translateX(calc(-50% + 2px)); width: 8px; height: 8px; border-radius: 50%; background-color: var(--primary); } .row { gap:10px; }  .orderchanger-1 { order:1; } .orderchanger-2 { order:2; } @media only screen and (max-width: 767px) { .orderchanger-1 { order:2; } .orderchanger-2 { order:1; } } .logoline img { width: 100%; height: auto; }  .home-default { align-items: flex-start; background-color: var(--wei); display: flex; overflow: hidden; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; } .home-default .overlap-group { width: 100vw; height: 100vh; overflow: hidden; } .home-default .overlay-color { background-color: var(--primary); left: 0; mix-blend-mode: hue; position: absolute; top: 0; width: 100vw; height: 100vh; } @media (min-width: 768px) { .centred { margin-left:auto!important; margin-right:auto!important; width: 600px; } } .vergroesserung { height: 32px; cursor: pointer; } .Kl-Gr { height: 106px; padding-top: 14px; position: fixed; width: 66px; left: 32px; bottom: 32px; z-index: 99; display: flex; flex-direction: column; gap: 14px; border-radius: 16px; border: 1px solid var(--primary); background: var(--secondary); } @media (min-width: 555px) and (max-width: 1023px) { .vergroesserung { right: 32px; bottom: 81px; } .Kl-Gr { left: 12px; bottom: 51px; } } @media (max-width: 554px) { .Kl-Gr { left: 12px; bottom: 51px; } }  .fnote { position: relative; top: -0.75em; color: var(--primary); z-index: 1; cursor: pointer; } .fnote::after { content: ""; position: absolute; top: -0.3em; left: -0.25em; background-color: var(--secondary); border-radius: 50%; z-index: -1; } p.sm-kleine-auszeichnung > span.fnote { font-size: 0.5rem!important; } figure { margin:0; } .coating .fnote::after { background-color: var(--secondary)!important; } .coating .fnote { color: var(--primary); }  .media { width:100%; }  .modal.is-visible { visibility: visible; opacity: 1; } .modal { --pad-modal: 30px; --pad-large-modal: 50px; --pad-modal-box: clamp(24px, 3vw, 48px); position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; min-height: 100%; height: auto; padding: var(--pad-modal) 0; background-color: rgba(0, 0, 0, 0.7); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; z-index: 10; transition: visibility 0s, opacity 0.4s; } .modal__content { display: inline-block; width: 840px; max-width: 100%; margin: auto 0; opacity: 1; transition: opacity 0.6s 0.2s; } .modal__box { padding: 3rem; background: var(--weiss); border-radius: 16px; opacity: 1; } .cookie-btn-flex { display: flex !important; align-items: center; justify-content: flex-end; }  .tafel-gedenken { border-radius: 32px!important; background-color: var(--secondary); width: 280px; height: 280px; display: flex; justify-content: center; align-items: center; padding:0; border: none; cursor: pointer; } .tafel-gedenken:hover { border: none; } .tafel-gedenken img { width: 100%; height: 100%; object-fit: cover; border-radius: 32px!important; } .fit-content { width: fit-content; height: fit-content; gap:16px; text-align: center; } .fit-content .md-grosser-fliesstext { max-width: 280px; } .ep-gedenken { gap:32px; } .width-280px { max-width: 280px; text-align: center; }  .loader { background-color: rgba(0, 0, 0, 0.7)!important; transition: background-color 0.6s 0.2s, opacity 0.6s 0.2s;  position: fixed; top: 0; right: 0; left: 0; z-index: 2; color: var(--weiss); }  .navigation a { width:100%; }  .lazy-image { background-size: cover; background-position: center; } .image-style-large { max-width: 100%; width:100%; border-radius: 25px; height:auto; } .container-lg > .img-triggerwarnung { width:100%; } .loading-anim { background-color: var(--secondary); animation: pulsate 2s infinite; } @keyframes pulsate { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }  .flexlater { width: calc(100% - 150px); } .floatrightImg { float: right; } @media (max-width: 1400px) { .flexlater { width: 100%; } .floatrightImg { margin-left:16px; } } @media only screen and (max-width: 767px) { .floatrightImg { margin-top:16px; margin-left:0px; float: none; } .flexlater { display:flex; flex-direction:column; } } order-0 { order:0; } order-1 { order:1; } order-3 { order:3; } order-4 { order:4; }  .ck .coating { width:100%; } .ck .list { display: block; } .ck p { margin: 0; margin-bottom:0px!important; } .ck video { display: block; }  .logo-overlay { top: 40px; left: 40px; z-index: 1; position: fixed; max-width:350px; text-shadow: 0px 0px 2px #ffffff; } .title-element { display: none;  } .logo-ead { width:94px; height:100px; } .subtitle-element, .logo-ead { margin-top:19px; }  @media (min-width: 1024px) { .title-element { display: block;  } }  @media (min-width: 555px) and (max-width: 1023px) { .logo-overlay { top: 100px;  left: 24px;  } .subtitle-element { margin-top:0px; } .logo-ead { margin-top:10px; } }  @media (max-width: 554px) { .logo-overlay { top: 119px;  left: 19px;  } .logo-ead { display: none;  } .subtitle-element, .logo-ead { margin-top:0px; } } .cont-stoer { display: flex; gap: 8px; display: flex; align-items: flex-start; } .stoerer { border-radius: 13px; background: var(--primary); color: var(--secondary); padding: 7px 6px 4px 7px; } .inactive { opacity: 0.5; } .kontrast path, .hamburger-menu path, .navigation .icons-pfeil-oben path, .navigation .icons-pfeil-oben stroke, .icons-instagram path, .icons-mail path, #info-close path, .icon-quelle path { fill: var(--primary)!important; } .galleryel { position: relative !important;  } .gallery-nav { position: absolute; top: 221px; background-color: #fff;  border: none; cursor: pointer; padding: 10px; font-size: 24px; z-index: 10;  } .galleryel button { width: 43px; height: 43px; color: var(--primary) !important; background: var(--secondary) !important; border: none !important; border-radius: 25px !important; opacity: 0; transition: background 1s, color 1s, opacity 1s; } .galleryel:hover button { opacity: 1; } .gallery-nav.left { left: 10px; } .gallery-nav.right { right: 10px; } .gallery-nav.left .svg-arrow { rotate: -90deg; width: 18px; transform: translate(4px, -1px); color: var(--primary); } .gallery-nav.right .svg-arrow { rotate: 90deg; width: 18px; transform: translate(-4px, 1px); color: var(--primary); } .noround img { border-radius: 0; } .scrolled-down{ transform:translateY(-100%); transition: all 0.3s ease-in-out; } .scrolled-up{ transform:translateY(0); transition: all 0.3s ease-in-out; } .scrolled-head-up { top:0px!important; transition: all 0.3s ease-in-out; } .scrolled-head-down { top:-100px!important; transition: all 0.3s ease-in-out; } @media only screen (max-width: 1023px) { #headerhover { background:transparent!important; border:0!important; height:0px!important; margin:0px!important; padding:0px!important; } } @media only screen and (max-width: 767px) { #headerhover { background:transparent!important; border:0!important; height:0px!important; margin:0px!important; padding:0px!important; } }