/*
 * Shared secondary-page layer.
 * Scope: every page except the German start page and the five reference pages.
 * See ../DESIGN-GUIDELINE.md for the design decisions behind these rules.
 */

.secondary-page #inhalt {
  background: var(--paper);
}

/* A consistent editorial rhythm, without changing the shared header or footer. */
.secondary-page #inhalt > .section.outer {
  padding-top: clamp(3.5rem, 7vw, 6.5rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem) !important;
}

.secondary-page #inhalt > .section.outer > .row {
  width: min(100%, 1120px);
}

.secondary-page #inhalt .widget-heading h1,
.secondary-page #inhalt .widget-heading h2,
.secondary-page #inhalt .widget-heading h3 {
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.secondary-page #inhalt .widget-heading h1 {
  font-size: clamp(2.6rem, 5.4vw, 5.5rem) !important;
  line-height: .98 !important;
}

.secondary-page #inhalt .widget-heading h2 {
  font-size: clamp(1.7rem, 3.2vw, 3.4rem) !important;
  line-height: 1.04 !important;
}

.secondary-page #inhalt .widget-heading h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
  line-height: 1.18 !important;
}

.secondary-page #inhalt .widget-text-editor {
  max-width: 46rem;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

/* Large direct image modules follow a single, reusable 16:9 format. */
.secondary-page #inhalt > .section.outer > .row > .column > .widget-image .image-link {
  display: block;
  overflow: hidden;
  background: #e7ecec;
}

.secondary-page #inhalt > .section.outer > .row > .column > .widget-image .image-link > img {
  width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Calls to action are compact actions, never full-width decorative bars. */
.secondary-page #inhalt .widget-button {
  padding: 0 !important;
  background: transparent !important;
}

.secondary-page #inhalt .widget-button .button {
  display: inline-block;
  margin-top: .5rem;
  padding: .9rem 1.35rem;
}

.secondary-page #inhalt .image-box {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: #fff;
  border-color: var(--line);
  border-radius: 0;
  box-shadow: none;
}

.secondary-page #inhalt .image-box h3 {
  font-size: 1.15rem;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .secondary-page #inhalt > .section.outer {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .secondary-page #inhalt > .section.outer > .row {
    width: 100%;
  }

  .secondary-page #inhalt .widget-heading h1 {
    font-size: clamp(2.35rem, 11vw, 3.5rem) !important;
  }

  .secondary-page #inhalt .widget-heading h2 {
    font-size: clamp(1.55rem, 7vw, 2.4rem) !important;
  }
}