/* ── WIR / ÜBER UNS ──────────────────────────────────────
   Page head and .intro-* come from leistungen.css / style.css.
   ─────────────────────────────────────────────────────── */

/* the team photo sits behind the pixel blocks, the untinted front version
   rather than the red-toned one on the start page */
.hero--wir {
  background-image: url('imgs/wir-header.webp');
}

/* the blocks are part of the hero above, so the head carries no background.
   Heading flush left directly under the hero, bubble overlapping the hero
   edge at the top right: same treatment and same size as index.html. */
.page-head--plain {
  background-image: none;
  padding-top: clamp(24px, 3vw, 56px);
}

.page-head--plain .page-head-inner {
  /* override leistungen.css's centred + offset treatment */
  width: auto;
  right: 0;
  margin-inline: 0;
  max-width: var(--maxw);
  text-align: left;
}

.page-head--plain .intro-mark,
.page-head--plain .intro-title span,
.page-head--plain .page-lead {
  margin-inline: 0;
}

/* mirrors .intro-bubble in style.css, including the --bubble-w ratio maths */
.page-head-bubble {
  display: block;
  width: var(--bubble-w);
  height: auto;
  margin: calc(var(--bubble-w) * -0.249) 0 clamp(16px, 2vw, 34px) auto;
  position: relative;
  z-index: 2;
}

@media (min-width: 901px) {
  .page-head--plain {
    position: relative;
    /* the section must stay tall enough to contain the out-of-flow bubble,
       otherwise it would hang down into the first bio below */
    min-height: calc(var(--bubble-w) * 0.343 + 40px);
  }

  .page-head--plain .page-head-inner {
    margin-inline: auto;
  }

  .page-head-bubble {
    position: absolute;
    top: calc(var(--bubble-w) * -0.249);
    right: var(--gutter);
    margin: 0;
  }
}

@media (min-width: 1680px) {
  .page-head-bubble {
    right: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  }
}

/* ── PERSON ──────────────────────────────────────────────
   Portrait and text alternate sides, so the two bios read as a
   conversation rather than two identical profile cards. */
.person {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(16px, 3vw, 28px);
  column-gap: clamp(28px, 4.5vw, 88px);
  align-items: center;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 84px) var(--gutter);
}

.person-figure {
  min-width: 0;
}

.person-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* single column: an 1400px-wide portrait would dwarf the bio text */
  max-width: 520px;
  margin-inline: auto;
}

.person-text {
  min-width: 0;
  max-width: 62ch;
}

/* two columns only once each one can still hold a readable measure */
@media (min-width: 860px) {
  .person {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .person--flip .person-figure { order: 2; }

  .person-figure img {
    max-width: none;
    margin-inline: 0;
  }
}

.person-name {
  font-family: 'Caveat', cursive;
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 1;
  color: var(--c-berry);
}

/* the surname stays in the heading text (it is what makes the person a
   recognisable entity) but reads as a quiet second line, so the script
   first name still carries the design */
.person-surname {
  display: block;
  margin-top: 2px;
  font-family: 'DIN Condensed', sans-serif;
  font-size: var(--fs-md);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.person-role {
  margin-top: clamp(4px, 0.6vw, 10px);
  font-family: 'DIN Condensed', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-soft);
}

.person-text p {
  margin-top: clamp(12px, 1.3vw, 20px);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-body);
}

.person-text .person-role + p {
  margin-top: clamp(18px, 2vw, 30px);
}

.person-outro {
  font-weight: 600;
  color: var(--c-ink);
}

/* ── PRINZIP ─────────────────────────────────────────── */
/* client-supplied speech bubble between the two bios and the principle block.
   width is capped by both a max-width and the page gutter, so it can never
   push past the viewport the way a content-box + padding combination would */
.wir-bubble {
  display: block;
  width: min(480px, 100% - 2 * var(--gutter));
  height: auto;
  margin: clamp(8px, 1.5vw, 24px) auto clamp(4px, 1vw, 16px);
}

/* dark, not the brand gradient: this block sits directly above the
   gradient footer, and two gradients meeting read as one muddy zone */
.principle {
  margin-top: clamp(20px, 3vw, 48px);
  padding: var(--section-y) var(--gutter);
  background: var(--c-ink);
  color: var(--c-paper-dim);
}

.principle-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(32px, 5vw, 96px);
  row-gap: clamp(32px, 4vw, 56px);
  max-width: var(--maxw);
  margin-inline: auto;
}

@media (min-width: 760px) {
  .principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.principle-title {
  font-family: 'DIN Condensed', sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-orange);
}

.principle-block p {
  margin-top: clamp(12px, 1.4vw, 22px);
  max-width: 58ch;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.75;
  color: rgba(253, 251, 252, 0.82);
}

/* the page previously ended without a single link out of <main> */
.wir-cta {
  max-width: var(--maxw);
  margin: clamp(28px, 3.5vw, 52px) auto 0;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(253, 251, 252, 0.9);
}

.wir-cta a {
  color: var(--c-orange);
  font-weight: 600;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: color 0.2s ease;
}

.wir-cta a:hover { color: #fff; }