/* Fluid section surfaces with a readable, responsive inner content width. */
:root {
  --ip-image-radius: clamp(14px, 1.5vw, 22px);
  --ip-image-radius-lg: 22px;
  --ip-image-radius-sm: 12px;
}

/*
 * BlockBuilder image utilities.
 * Add one class to an Image or Our Team block's "Extra class name" field.
 * These never change image size or crop. They also suppress the legacy
 * Our Team zoom/dark-overlay effect when applied to that component.
 */
body .ip-rounded-image {
  --ip-rounded-image-radius: var(--ip-image-radius);
}

body .ip-rounded-image-lg {
  --ip-rounded-image-radius: var(--ip-image-radius-lg);
}

body .ip-rounded-image-sm {
  --ip-rounded-image-radius: var(--ip-image-radius-sm);
}

body .ip-rounded-image img,
body .ip-rounded-image-lg img,
body .ip-rounded-image-sm img,
body img.ip-rounded-image,
body img.ip-rounded-image-lg,
body img.ip-rounded-image-sm {
  border-radius: var(--ip-rounded-image-radius);
}

/* Our Team clips overlays at .team-header rather than at the image itself. */
body .gsc-team.ip-rounded-image .team-header,
body .gsc-team.ip-rounded-image-lg .team-header,
body .gsc-team.ip-rounded-image-sm .team-header {
  border-radius: var(--ip-rounded-image-radius);
  overflow: hidden;
}

body .gsc-team.ip-rounded-image .box-hover,
body .gsc-team.ip-rounded-image-lg .box-hover,
body .gsc-team.ip-rounded-image-sm .box-hover {
  display: none !important;
}

body .gsc-team.ip-rounded-image:hover .team-header img,
body .gsc-team.ip-rounded-image-lg:hover .team-header img,
body .gsc-team.ip-rounded-image-sm:hover .team-header img {
  transform: none !important;
}

/* Team profile pages use one consistent, compact portrait treatment without
   changing the uploaded source images or team teaser cards elsewhere. */
body.node--type-team .team-single-page .team-image {
  position: relative;
  width: min(100%, 280px);
  aspect-ratio: 4 / 5;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  border-radius: var(--ip-image-radius);
}

body.node--type-team .team-single-page .team-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* Keep full article lead images editorial rather than oversized. Their natural
   aspect ratio remains intact; the shared rounded frame applies only here. */
body.node--type-article article.node--view-mode-full .post-thumbnail {
  width: 100%;
  max-width: 720px;
  overflow: hidden;
  border-radius: var(--ip-image-radius);
}

body.node--type-article article.node--view-mode-full .post-thumbnail img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Article media may use the full width of the existing `wide` image
   derivative on larger screens, while prose and the related-content sidebar
   retain their established measures. */
@media (min-width: 1200px) {
  body.node--type-article article.node--view-mode-full .post-thumbnail {
    max-width: 860px;
  }
}

body.integplan-fluid-layout.integplan-blockbuilder-page
  #content.content-full > .container.container-bg {
  width: 100%;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

body.integplan-fluid-layout:not(.integplan-blockbuilder-page):not(.path-registrierung)
  #content.content-full > .container.container-bg {
  width: min(1600px, 100%);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  padding-right: clamp(16px, 3vw, 48px);
  padding-left: clamp(16px, 3vw, 48px);
}

body.integplan-fluid-layout .node__content,
body.integplan-fluid-layout .field--name-field-block-builder,
body.integplan-fluid-layout .gavias-blockbuilder-content {
  width: 100%;
  max-width: none;
}

body.integplan-fluid-layout:not(.integplan-section-page)
  .gbb-row > .bb-inner > .bb-container.container {
  width: min(1600px, calc(100% - clamp(32px, 6vw, 96px)));
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

body.integplan-fluid-layout:not(.integplan-section-page)
  .gbb-row > .bb-inner > .bb-container.container-fw,
body.integplan-fluid-layout:not(.integplan-section-page)
  .gbb-row > .bb-inner > .bb-container.full-screen {
  width: 100%;
  max-width: none;
}

/* Keep secondary content subordinate on article and course detail pages. */
@media (min-width: 992px) {
  body.node--type-article #page-main-content,
  body.path-product #page-main-content {
    width: calc(100% - clamp(270px, 22vw, 320px));
  }

  body.node--type-article
    .content-main-inner > .row > .sidebar-right,
  body.path-product
    .content-main-inner > .row > .sidebar-right {
    width: clamp(270px, 22vw, 320px);
  }
}

/* Long-form copy follows the editorial layout where the line width supports it. */
@media (min-width: 768px) {
  body.node--type-article #page-main-content .field--name-body p,
  body.path-product #page-main-content .single-course .field--name-body p {
    hyphens: auto;
    overflow-wrap: anywhere;
    text-align: justify;
    text-justify: inter-word;
  }
}

/* Course detail sidebar: keep the human-entered heading capitalization. */
body.path-product #block-views-block-courses-block-5 .block-title > span {
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: none !important;
}

/* "Zur Weiterbildungsübersicht": a full-width outline pill like the site's
   other pill controls, sized to stay on one line in the sidebar. */
body.path-product #block-views-block-courses-block-5 .more-link {
  container-type: inline-size;
  margin-top: 22px;
  text-align: center;
}

body.path-product #block-views-block-courses-block-5 .more-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  border: 1px solid #d66016;
  border-radius: 999px;
  padding: 10px 14px;
  color: #a9480f !important;
  background: #fff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

body.path-product #block-views-block-courses-block-5 .more-link a::after {
  content: "→";
}

/* Narrow sidebars (e.g. around 1100px viewport width): smaller text and no
   decorative arrow keep the label on one line. */
@container (max-width: 279px) {
  body.path-product #block-views-block-courses-block-5 .more-link a {
    padding: 10px 10px;
    font-size: 13px;
  }

  body.path-product #block-views-block-courses-block-5 .more-link a::after {
    display: none;
  }
}

body.path-product #block-views-block-courses-block-5 .more-link a:hover,
body.path-product #block-views-block-courses-block-5 .more-link a:focus-visible {
  color: #fff !important;
  background: #d66016 !important;
  text-decoration: none !important;
}

body.path-product #block-views-block-courses-block-5 .more-link a:focus-visible {
  outline: 3px solid rgba(214, 96, 22, 0.38);
  outline-offset: 3px;
}