/* ==========================================================================
   Components
   --------------------------------------------------------------------------
   Shared components used by several partials / Content Blocks.
   Styles of a single element belong to that element.
   ========================================================================== */

/* ---- Buttons ----
   .btn            outline (white, dark border)  – "Bewerben", "Mehr erfahren"
   .btn--dark      filled dark                   – "Projektanfrage"
   .btn--sm        compact size for the header
   .btn--lg        large size of the layout (245 × 55 px at 1360): content buttons
   .link-button    buttons from the RTE: style "Button (Rahmen)" (.color1) = .btn.btn--lg,
                   "Button (dunkel)" (.color2) = .btn.btn--lg.btn--dark
   Both variants share the 1px border, so filled and outline buttons have
   exactly the same size. */
.btn,
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--tap);
  padding: 0.25em 1.5em;
  border: 1px solid var(--c-text);
  background: var(--c-white);
  color: var(--c-text);
  font-size: var(--fs-body);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
.btn:hover,
.link-button:hover {
  background: var(--c-text);
  color: var(--c-white);
}

.btn--dark,
.link-button.color2 {
  background: var(--c-text);
  color: var(--c-white);
}
.btn--dark:hover,
.link-button.color2:hover {
  background: var(--c-white);
  color: var(--c-text);
}

.btn--lg,
.link-button {
  min-width: min(100%, clamp(12rem, 18vw, 15.5rem));   /* 245px */
  min-height: clamp(3rem, 4vw, 3.5rem);                /* 55px */
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
}

/* Dark section: inverted. Dark button = white filled (main action), outline button = white border */
.section--bg-dark :is(.btn, .link-button) {
  border-color: var(--c-white);
  background: transparent;
  color: var(--c-white);
}
.section--bg-dark :is(.btn--dark, .link-button.color2),
.section--bg-dark :is(.btn, .link-button):hover {
  background: var(--c-white);
  color: var(--c-text);
}
.section--bg-dark :is(.btn--dark, .link-button.color2):hover {
  background: transparent;
  color: var(--c-white);
}