/* Recherche-Atelier: Styleguide Version 1.0, Juli 2026. */
@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: "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: "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-Bold.woff2") format("woff2");
  font-style: normal; font-weight: 700; font-display: swap;
}
body.home {
  --atelier-ink: #020325; --atelier-accent: #e2009f;
  --atelier-surface: #f7f2ee; /* Chamois #ad7f51 mit 10 Prozent. */
  color: var(--atelier-ink);
}
body.home :is(p, span, em, i, li, td, address, a, strong, b, th,
  button, label, input, textarea, select) {
  font-family: "General Sans", Arial, sans-serif !important; font-weight: 400;
}
body.home :is(h1, h2, h3, h4, h5, h6) {
  font-family: "Fraunces", Georgia, serif !important; font-weight: 400;
}
body.home :is(h2, h3) { font-weight: 700; }
body.home h3 { font-family: "General Sans", Arial, sans-serif !important; }
body.home :is(h1, h2, h3, h4, h5, h6, p) { color: inherit; }
body.home a { color: var(--atelier-ink); }
body.home .block-dark-background a { color: var(--atelier-ink); }
body.home :is(.block-disruptor-contact, .block-disruptor-newsletter,
  .block-contact-form, .block-customers-wall, .contact-badge) {
  color: var(--atelier-ink);
}
body.home header .header__right__navigation__button__line,
body.home .contact-badge__icon::before { background-color: var(--atelier-ink); }
body.home :is(h1, h2, h3, h4, h5, h6) :is(span, em, a, strong, b, i) {
  font-family: inherit !important; font-size: inherit; font-weight: inherit;
}
body.home :is(h1, h2, h3, h4, h5, h6) * {
  font-family: inherit !important; font-size: inherit; font-weight: inherit;
}
body.home .block-introtext p,
body.home .block-shortlinks-frontpage ul li a,
body.home header .header__right__expert-link ul a { color: var(--atelier-ink); }
body.home .block-dark-background::after {
  background: var(--atelier-gradient); background-size: 4000% 1000%;
  background-position: 100% 100%; animation: atelier-gradient 20s ease infinite;
}
body.home a:focus-visible, body.home button:focus-visible {
  outline: 3px solid var(--atelier-accent); outline-offset: 5px;
}
.front-page--html-hero {
  --hero-header-height: 70px; --hero-surface: var(--atelier-surface); width: 100%;
  min-width: 0; color: var(--atelier-ink);
}
.front-page--html-hero > .front-page__content,
.front-page--html-hero > .front-page__content.front-page__content__not-fixed {
  position: relative; inset: auto; z-index: 0; width: 100%; margin: 0; padding-top: 0;
  background: var(--hero-surface);
}
.front-page--html-hero .front-page__hero {
  position: relative; isolation: isolate; box-sizing: border-box; overflow: hidden;
  min-height: 0; padding: var(--hero-header-height) 0 0;
  background: var(--hero-surface);
}
.front-page--html-hero .front-page__hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: none;
}
.front-page--html-hero .front-page__hero-inner {
  position: absolute; z-index: 2; left: 0; right: 0;
  top: calc(var(--hero-header-height) + clamp(2rem, 4vw, 4rem));
}
.front-page--html-hero .front-page__hero-text {
  min-width: 0; max-width: 60rem; width: fit-content;
  background: none;
  box-shadow: none; border-radius: 0;
}
.front-page--html-hero .front-page__hero-title {
  margin: 0; padding: 0;
  font-size: clamp(5rem, calc(80px + 120 * ((100vw - 375px) / 1545)), 12.5rem);
  line-height: 1.02; letter-spacing: -0.04em; color: #000000;
  text-shadow: none;
  hyphens: none; overflow-wrap: normal; word-break: normal;
}
.front-page--html-hero .front-page__hero-title > span {
  display: block; font: inherit; letter-spacing: inherit; color: inherit;
}
.front-page--html-hero .front-page__hero-title > .front-page__hero-atelier {
  color: var(--atelier-accent); transition: none;
}
.front-page--html-hero .front-page__hero-claim {
  margin: clamp(1.25rem, 2vw, 2rem) 0 0; max-width: 27ch; width: fit-content;
  box-sizing: border-box; padding: 0;
  font-size: clamp(1.5rem, 2.1vw, 2.125rem); font-weight: 700; line-height: 1.35;
  color: #020325; background: none; border: 0; box-shadow: none;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.85), 0 0 20px rgba(255, 255, 255, 0.65);
}
.front-page--html-hero .front-page__hero-media {
  position: relative; inset: auto; z-index: 0; margin: 0; min-width: 0;
  width: 100%; aspect-ratio: 1280 / 956; pointer-events: none;
}
.front-page--html-hero .front-page__hero-image {
  /* Beide Fotos vollstaendig und proportional, ohne Beschnitt oder Strecken. */
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: contain;
  max-width: none; max-height: none; object-position: center;
  transform: none;
}
.front-page--html-hero .front-page__hero-image--monochrome {
  position: absolute; inset: 0; z-index: 1; filter: none;
  opacity: var(--hero-gray-opacity, 0); will-change: opacity;
}
.front-page--html-hero .block-introtext:first-child p,
.front-page--html-hero .wp-block-lazyblock-introtext:first-child p {
  max-width: 62ch; margin-top: 0; padding-top: clamp(1rem, 2vw, 2rem);
  font-size: clamp(1.25rem, 1.8vw, 1.875rem); line-height: 1.55;
  white-space: pre-line;
}
@media (min-width: 768px) {
  .front-page--html-hero { --hero-header-height: 80px; }
}
@media (max-width: 1199px) {
  .front-page--html-hero .front-page__hero-title {
    font-size: min(clamp(5rem, calc(80px + 120 * ((100vw - 375px) / 1545)), 12.5rem), 18vw);
  }
}
/* Lesbare Abschnitte und Breite auch mit sichtbarer Browser-Scrollleiste. */
body.home {
  width: 100% !important; min-width: 0 !important; max-width: 100% !important;
}
body.home > header { width: 100%; }
body.home .contact-badge { display: none; }
body.home > footer::after { left: 0; width: 100%; }
body.home .block-dark-background::after { width: auto; left: -50px; right: -50px; }
body.home header .header__right__navigation__inner a { color: var(--atelier-ink); }
.front-page--html-hero .front-page__content > .content-container > div {
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
body.home .block-dark-background {
  color: var(--atelier-ink); padding: clamp(3rem, 6vw, 6rem) 0;
}
body.home .block-offers ul li a { border-color: var(--atelier-ink); }
body.home .block-dark-background .wp-block-lazyblock-offers,
body.home .block-dark-background .wp-block-lazyblock-more-posts { margin-bottom: 0; }
body.home .block-offers h2, body.home .block-more-posts h2,
body.home .block-contact-form h2 {
  font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.15; margin-bottom: 2rem;
}
body.home .block-contact-form h2 { min-width: 0; max-width: 100%; }
body.home .block-offers ul li a div h3 {
  font-size: clamp(1.65rem, 3vw, 2.75rem); line-height: 1.2;
}
body.home .block-offers ul li a { margin-bottom: 2rem; padding-bottom: 2rem; }
body.home .block-dark-background .block-offers ul li a div img {
  content: url("../img/atelier-arrow.svg"); filter: brightness(0) invert(1);
}
body.home .block-shortlinks-frontpage ul li a {
  font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700;
}
body.home .block-shortlinks-frontpage ul li a::after {
  content: ""; display: block; width: 3rem; height: 3px; padding: 0;
  margin: 0.6rem 0 0; background-color: var(--atelier-accent); filter: none;
}
body.home .block-customers-wall ul li {
  font-size: clamp(1.25rem, 2vw, 1.875rem); line-height: 1.5;
}
body.home .block-customers-wall ul li::after { padding: 0 0.5em; }
body.home .block-disruptor-contact__booking a { border-color: var(--atelier-ink); }
body.home .block-disruptor-contact__person__flex__facts {
  min-width: 0; overflow-wrap: anywhere;
}
body.home .block-more-posts__grid > .card-news:only-child {
  grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
}
body.home .card-news__text h3 {
  font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.25;
}
@media (max-width: 1200px) {
  body.home .block-dark-background::after { left: -30px; right: -30px; }
}
@media (max-width: 1199px) {
  body.home header .header__right__navigation__inner {
    top: 90px;
    height: auto;
    padding-bottom: 2rem;
    gap: 2rem;
  }
  body.home header .header__right__navigation__inner__primary,
  body.home header .header__right__navigation__inner__primary :is(nav, div, ul) {
    height: auto;
  }
  body.home header .header__right__navigation__inner ul {
    gap: 1.5rem;
    justify-content: flex-start;
  }
  body.home header .header__right__navigation__inner ul li a {
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.2;
  }
}
@media (max-width: 768px) {
  body.home .block-dark-background::after { left: -16px; right: -16px; }
}
@media (max-width: 767px) {
  body.home .block-offers ul li a div { gap: 8px; }
  body.home .block-offers ul li a div h3 { max-width: calc(100% - 40px); }
  body.home .block-offers ul li a div img { width: 32px; }
  body.home .block-disruptor-contact__person__flex {
    flex-direction: column;
    align-items: flex-start;
  }
  body.home .block-disruptor-contact__person__flex__facts {
    font-size: 1rem;
    line-height: 1.5;
  }
  body.home .block-more-posts__grid > .card-news:only-child {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) { body.home .block-dark-background::after { animation: none; } }

/* Angebote: ursprüngliche Anordnung mit einer feinen Trennlinie. */
body.home .block-offers h2 {
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
body.home .block-offers ul li a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
@media (max-width: 375px) {
  .front-page--html-hero .front-page__hero-inner {
    top: calc(var(--hero-header-height) + 1rem);
  }
  .front-page--html-hero .front-page__hero-claim {
    font-size: 1.375rem; margin-top: 1rem;
  }
}
