/* 20blue: zweite und dritte Ebene im bestehenden Template. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/Fraunces-Regular.woff2") format("woff2");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/Fraunces-Bold.ttf") format("truetype");
  font-style: normal; font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans/GeneralSans-Regular.woff2") format("woff2");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans/GeneralSans-Bold.woff2") format("woff2");
  font-style: normal; font-weight: 700; font-display: swap;
}
body.atelier-design {
  --atelier-ink: #020325;
  --atelier-gradient: linear-gradient(-57deg, #020325 0%, #020325 35%, #8508a1 65%, #2317ab 100%);
  --atelier-accent: #e2009f;
  --atelier-surface: #f7f2ee; /* Chamois mit 10 Prozent. */
  --atelier-ink-soft: #ededf0; /* Midnightblue mit 7 Prozent auf Weiß. */
}
body.atelier-design a { color: var(--atelier-ink) !important; }
body.atelier-design a:hover {
  color: var(--atelier-ink) !important;
  text-decoration-color: var(--atelier-accent); text-decoration-thickness: 0.12em;
}
body.atelier-design main :is(p, li, dd, figcaption) {
  overflow-wrap: anywhere; hyphens: auto;
}
body.atelier-design :is(.block-more-posts, .block-more-posts-frontpage,
  .block-offers, .card-topic) { color: var(--atelier-ink); }
body.atelier-design :is(h2, h3) {
  hyphens: auto; overflow-wrap: break-word; word-break: normal;
}
body.atelier-design::selection, body.atelier-design ::selection {
  color: var(--atelier-ink); background: var(--atelier-ink-soft);
}
/* Die leere Shop-Zeile soll keinen Platz im Menü beanspruchen. */
body.atelier-design header .header__right__navigation__inner__secondary:not(:has(a)) {
  display: none;
}
body.atelier-level-two {
  color: var(--atelier-ink); background-color: #ffffff;
  width: 100% !important; min-width: 0 !important; max-width: 100% !important;
}
body.atelier-level-two main {
  position: relative; isolation: isolate; background: var(--atelier-surface);
}
body.atelier-level-two > header { width: 100%; }
body.atelier-level-two > footer::after { left: 0; width: 100%; }
body.atelier-level-two :is(p, span, em, i, li, td, address, a, strong, b, th,
  button, label, input, textarea, select, option, optgroup, legend, figcaption,
  dt, dd, .card-project__project-info, .card-news__text__categories) {
  font-family: "General Sans", Arial, sans-serif !important; font-weight: 400;
}
body.atelier-level-two :is(strong, b, th, button, .strong, .bold) { font-weight: 700; }
body.atelier-level-two :is(h1, h2, h3, h4, h5, h6) {
  font-family: "Fraunces", Georgia, serif !important; font-weight: 400;
}
body.atelier-level-two :is(h2, h3) { font-weight: 700; }
body.atelier-design h3 {
  font-family: "General Sans", Arial, sans-serif !important; font-weight: 700;
}
body.atelier-level-two h1 { letter-spacing: -0.04em; }
body.atelier-level-two :is(h1, h2, h3, h4, h5, h6) :is(span, em, a, strong, b, i) {
  font-family: inherit !important; font-weight: inherit;
}
body.atelier-design.atelier-level-two :is(h1, h2, h3, h4, h5, h6) * {
  font-family: inherit !important; font-size: inherit; font-weight: inherit;
}
/* Grundfarben außerhalb der wiederhergestellten Verlaufsbereiche. */
body.atelier-level-two :is(.page-default, .page-distribution, .block-dark-background,
  .block-disruptor-contact, .block-disruptor-link, .block-disruptor-newsletter,
  .block-contact-form, .block-team, .block-faq, .block-divider-image-text,
  .contact-badge, .breadcrumb, .card-project, .card-news, .card-service__container) {
  color: var(--atelier-ink);
}
body.atelier-level-two .page-distribution__background,
body.atelier-level-two .block-dark-background::after {
  background: var(--atelier-surface); animation: none;
}
body.atelier-level-two :is(h1, h2, h3, h4, h5, h6, p, label, .breadcrumb,
  .block-card-grid__form__search__submit span,
  .block-faq__container__question-answer__headline) {
  color: var(--atelier-ink) !important;
}
body.atelier-level-two .block-faq__container__question-answer__headline:hover {
  color: var(--atelier-accent) !important;
}
body.atelier-level-two .breadcrumb a { color: var(--atelier-ink); text-decoration-color: var(--atelier-ink); }
body.atelier-level-two .breadcrumb a:hover {
  color: var(--atelier-accent); text-decoration-color: var(--atelier-accent);
}
body.atelier-design header .header__right__navigation__button__line,
body.atelier-design .contact-badge:not(:hover) .contact-badge__icon::before {
  background-color: var(--atelier-ink);
}
body.atelier-design header .header__right__expert-link ul a:not(:hover)::before {
  background-color: var(--atelier-ink);
}
body.atelier-design header .header__right__expert-link ul a:hover::before {
  background-color: var(--atelier-accent);
}
body.atelier-level-two :is(.card-service__container, .card-project, .card-topic,
  .block-disruptor-contact__booking a, .block-team__member__bottom__email,
  .block-card-grid__form input,
  .block-card-grid__form button, .select-styled, .select-options) {
  border-color: var(--atelier-ink);
}
body.atelier-level-two :is(.card-project, .card-news):not(:hover) {
  border-color: var(--atelier-ink);
}
body.atelier-level-two :is(.block-card-grid__form input, .block-card-grid__form button,
  .block-card-grid__form select, .select-styled, .select-options) {
  color: var(--atelier-ink) !important; background-color: #ffffff !important;
}
body.atelier-level-two .block-card-grid__form input::placeholder {
  color: var(--atelier-ink) !important; opacity: 1;
}
body.atelier-level-two .block-card-grid__form input:not(:hover) {
  border-color: var(--atelier-ink) !important;
}
body.atelier-level-two .select-styled::after { background-color: #ffffff; }
body.atelier-level-two .select-options li:hover,
body.atelier-level-two .select-options li.is-selected { background: var(--atelier-ink-soft); }
body.atelier-level-two .card-project:hover { border-color: var(--atelier-accent); }
body.atelier-level-two :is(.block-more-posts__link a, .block-more-posts-frontpage__link a,
  .card-topic__link a):not(:hover)::before,
body.atelier-design footer .footer__navigation-social a:not(:hover)::after {
  background-color: var(--atelier-ink);
}
body.atelier-level-two :is(.b20-newsletter__button, .b20-newsletter__consent) {
  color: var(--atelier-ink);
}
body.atelier-about main { container-type: inline-size; }
body.atelier-about .block-divider-image-text::after {
  background-image: url("../img/recherche-atelier-wolke-farbe.jpeg") !important;
  inset: 0; width: 100%; height: 100%;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  background-attachment: scroll; opacity: 1; transform: none;
}
body.atelier-about .block-divider-image-text {
  --cloud-gutter: 50px;
  isolation: isolate; box-sizing: border-box;
  margin-left: calc((100% - 100cqw) / 2); margin-right: calc((100% - 100cqw) / 2);
  width: 100cqw; aspect-ratio: 1280 / 956;
  height: auto; min-height: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
body.atelier-about .block-divider-image-text p {
  color: #ffffff !important; font-weight: 700;
  box-sizing: border-box; width: fit-content; min-width: 0;
  max-width: calc(100% - 2 * var(--cloud-gutter)); margin: 0; padding: 0;
  background: none;
  box-shadow: none; border-radius: 0;
  text-shadow: 0 2px 6px #020325cc, 0 0 2px #020325cc;
}
@media (max-width: 1200px) {
  body.atelier-about .block-divider-image-text { --cloud-gutter: 30px; }
}
@media (max-width: 768px) {
  body.atelier-about .block-divider-image-text { --cloud-gutter: 16px; }
}
@media (max-width: 375px) {
  body.atelier-about .block-divider-image-text p { max-width: 100%; }
}
body.atelier-level-two .block-faq__container__question-answer__headline h3 {
  min-width: 0; overflow-wrap: anywhere;
}
body.atelier-level-two .block-faq__container__question-answer__headline__icon { flex-shrink: 0; }
body.atelier-level-two .card-service__container:is(:hover, :focus-visible) {
  color: var(--atelier-ink) !important; border-color: var(--atelier-ink);
}
body.atelier-level-two :is(.card-service, .card-service__container) { min-width: 0; }
body.atelier-level-two .card-service__container h2 { overflow-wrap: anywhere; }
body.atelier-level-two .block-disruptor-contact__person__flex__facts {
  min-width: 0; overflow-wrap: anywhere;
}
body.atelier-level-two .card-service__container h2::after {
  content: ""; display: inline-block; flex-shrink: 0; width: 48px; height: 25px;
  background-color: var(--atelier-ink); filter: none;
  -webkit-mask: url("../img/atelier-arrow.svg") center / contain no-repeat;
  mask: url("../img/atelier-arrow.svg") center / contain no-repeat;
}
body.atelier-level-two :is(.block-disruptor-link a, .block-disruptor-contact__booking a,
  .block-team__member__links a, .block-faq__question)::after {
  background-color: var(--atelier-ink);
}
body.atelier-level-two :is(.block-team__member__top__button,
  .block-team__member__bottom__button, .block-infographic__controls__previous,
  .block-infographic__controls__next):not(:hover)::after,
body.atelier-level-two .block-team__member__bottom__author-link:not(:hover)::before,
body.atelier-level-two .block-faq__container__question-answer__headline:not(:hover)
  .block-faq__container__question-answer__headline__icon::before {
  background-color: var(--atelier-ink);
}
body.atelier-level-two a:focus-visible, body.atelier-level-two button:focus-visible {
  outline: 3px solid var(--atelier-accent); outline-offset: 5px;
}
body.atelier-level-two svg :is([fill="#090067" i], [fill="#2613f4" i], [fill="#2317ab" i]) {
  fill: var(--atelier-ink);
}
body.atelier-level-two svg :is([stroke="#090067" i], [stroke="#2613f4" i], [stroke="#2317ab" i]) {
  stroke: var(--atelier-ink);
}
body.atelier-design .contact-badge { display: none; }
@media (max-width: 1199px) {
  body.atelier-level-two header .header__right__navigation__inner {
    top: 90px; height: calc(100dvh - 90px); box-sizing: border-box;
    overflow-y: auto; align-content: start; gap: 2rem; padding-bottom: 2rem;
  }
  body.atelier-level-two header .header__right__navigation__inner__primary,
  body.atelier-level-two header .header__right__navigation__inner__primary :is(nav, div, ul) {
    height: auto;
  }
  body.atelier-level-two header .header__right__navigation__inner ul {
    justify-content: flex-start; gap: 1.5rem;
  }
}
@media (max-width: 767px) {
  body.atelier-level-two .block-disruptor-contact__person__flex {
    flex-direction: column; align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.atelier-services .page-distribution__background { animation: none; }
}

/* Ursprüngliche Verlaufsbereiche: Services, Projekte und vorhandene dunkle Blöcke.
   Newsroom verwendet seit dem 13. Oktober ebenfalls diese gemeinsame Gestaltung. */
body.atelier-design :is(.page-distribution, .block-dark-background) {
  --atelier-ink: #ffffff;
  --atelier-ink-soft: #ffffff1a;
  color: #ffffff;
}
body.atelier-design .page-distribution__background,
body.atelier-design .block-dark-background::after {
  background: var(--atelier-gradient);
  background-size: 4000% 1000%; background-position: 100% 100%;
  animation: atelier-gradient 20s ease infinite;
}
body.atelier-level-two .page-distribution__background { inset: 0; }
body.atelier-design :is(.page-distribution, .block-dark-background)
  :is(h1, h2, h3, h4, h5, h6, p, span, li, a, label, figcaption, button) {
  color: #ffffff !important;
}
body.atelier-design :is(.page-distribution, .block-dark-background)
  :is(.card-project, .card-service__container, .card-topic, .block-disruptor-contact__booking a) {
  border-color: #ffffff;
}
body.atelier-design :is(.page-distribution, .block-dark-background) svg :is(text, tspan) {
  fill: #ffffff !important;
}
body.atelier-design :is(.page-distribution, .block-dark-background)
  .block-card-grid__form :is(input, button, select, .select-styled) {
  color: #ffffff !important; background-color: transparent !important;
  border-color: #ffffff !important;
}
body.atelier-design :is(.page-distribution, .block-dark-background)
  .block-card-grid__form input::placeholder { color: #ffffff !important; opacity: 1; }
body.atelier-design :is(.page-distribution, .block-dark-background) .select-options {
  --atelier-ink: #020325; --atelier-ink-soft: #ededf0;
  color: #020325 !important; background-color: #ffffff !important;
}
body.atelier-design :is(.page-distribution, .block-dark-background) .select-options li {
  color: #020325 !important;
}
body.atelier-design select :is(option, optgroup) {
  color: #020325 !important; background-color: #ffffff !important;
}
/* Aktive Sortieroptionen haben eine weiße Fläche und brauchen dunkle Schrift. */
body.atelier-design :is(.page-distribution, .block-dark-background)
  .block-card-grid__form__radio input:checked + label {
  color: #020325 !important; background-color: #ffffff;
}
@keyframes atelier-gradient {
  0%, 100% { background-position: 100% 100%; }
  50% { background-position: 0% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  body.atelier-design .page-distribution__background,
  body.atelier-design .block-dark-background::after { animation: none; }
}

/* Weiße Projekt-/Verweiskästen behalten dunkle Schrift innerhalb des Verlaufs. */
body.atelier-design .block-disruptor-link {
  --atelier-ink: #020325; color: #020325 !important; background-color: #ffffff;
}
body.atelier-design .block-disruptor-link
  :is(h1, h2, h3, h4, h5, h6, p, span, li, div, a, strong, b, em) {
  color: #020325 !important;
}
body.atelier-design .block-disruptor-link a:hover {
  color: #e2009f !important;
}

/* Weiße Kontaktkarte: Midnightblue für Text, Links und Konturen. */
body.atelier-design .block-disruptor-contact {
  --atelier-ink: #020325;
  color: #020325 !important; background-color: #ffffff;
}
body.atelier-design .block-disruptor-contact :is(h1, h2, h3, h4, h5, h6, p, span, li, div) {
  color: #020325 !important;
}
body.atelier-design .block-disruptor-contact a {
  color: #020325 !important; text-decoration-color: #020325 !important;
}
body.atelier-design .block-disruptor-contact a:hover {
  color: #e2009f !important; text-decoration-color: #e2009f !important;
}
body.atelier-design .block-disruptor-contact .block-disruptor-contact__booking a {
  color: #020325 !important; border-color: #020325 !important;
  text-decoration-color: #020325 !important; font-weight: 700;
}
body.atelier-design .block-disruptor-contact .block-disruptor-contact__booking a:hover {
  border-color: #e2009f !important;
}

/* Die Detailseiten behalten das Raster und ihre vorhandenen Inhaltsblöcke. */
body.atelier-level-three :is(.single-service, .single-project) {
  color: #020325; background-color: #f7f2ee;
}
body.atelier-level-three main { container-type: inline-size; }
body.atelier-level-three :is(.single-service__grid, .single-project__grid,
  .single-service__content, .single-project__content, .single-service__metabox,
  .single-project__metabox, .block-project-slider, .block-project-slider__controls,
  .block-project-slider__text) { min-width: 0; }
/* Gutenberg-Texte können direkt im vorhandenen Inhaltsraster stehen. */
body.atelier-level-three :is(.single-service__content, .single-project__content)
  > :is(h2, h3, h4, h5, h6, p, ul, ol, figure, .wp-block-group) {
  grid-column: 1 / -1; min-width: 0;
}
body.atelier-level-three h1 {
  min-width: 0; margin-left: 0; overflow-wrap: anywhere; hyphens: auto;
}
body.atelier-level-three :is(.single-service__single-page-category,
  .single-project__single-page-category, .single-service__metabox,
  .single-project__metabox) { --atelier-ink: #020325; color: #020325; }
body.atelier-level-three :is(.single-service__metabox, .single-project__metabox) {
  background: #ffffff;
}
body.atelier-level-three :is(.single-service__metabox, .single-project__metabox)
  :is(p, span, a, li, h2, h3) { color: #020325 !important; }
body.atelier-level-three :is(.single-service__metabox, .single-project__metabox) a,
body.atelier-design .block-disruptor-link a { font-weight: 700; }
body.atelier-level-three :is(.single-service__dark-background,
  .single-project__dark-background) {
  --atelier-ink: #ffffff; color: #ffffff; isolation: isolate;
}
body.atelier-level-three :is(.single-service__dark-background,
  .single-project__dark-background)::after {
  left: calc((100% - 100cqw) / 2); width: 100cqw;
  background: var(--atelier-gradient); background-size: 4000% 1000%;
  background-position: 100% 100%; animation: atelier-gradient 20s ease infinite;
}
body.atelier-level-three :is(.single-service__dark-background,
  .single-project__dark-background)
  :is(h1, h2, h3, h4, h5, h6, p, span, a, li):not(.block-disruptor-contact *) {
  color: #ffffff !important;
}
body.atelier-level-three :is(.single-service__dark-background,
  .single-project__dark-background) :is(.card-project, .card-service__container) {
  border-color: #ffffff;
}
body.atelier-level-three :is(.more-project-slidable__button__previous,
  .more-project-slidable__button__next)::after { background-color: #ffffff; }
body.atelier-level-three .block-project-slider__controls__headlines h3 {
  font-family: "General Sans", Arial, sans-serif !important; font-weight: 700 !important;
  min-width: 0; overflow-wrap: anywhere;
}
body.atelier-level-three .block-project-slider__controls__headlines
  h3:is(:hover, .block-project-slider__controls__headlines__headline-clicked) {
  color: #e2009f !important;
}
body.atelier-level-three :is(.block-project-slider__controls__buttons__previous,
  .block-project-slider__controls__buttons__next):not(:hover)::after {
  background-color: #020325;
}
body.atelier-level-three .block-calculator :is(input, textarea, select, button,
  .block-calculator__section__show-more__icon) { color: #020325; }
body.atelier-level-three :is([role="button"], [role="tab"]):focus-visible {
  outline: 3px solid #e2009f; outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  body.atelier-level-three :is(.single-service__dark-background,
    .single-project__dark-background)::after { animation: none; }
}