.about-hero {
  overflow: hidden;
  padding: 0;
  background: #fff;
  color: var(--text);
}

.about-hero *, .about-hero *::before, .about-hero *::after { box-sizing: border-box; }

.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(560px, 1.14fr);
  align-items: center;
  gap: clamp(56px, 6vw, 104px);
  width: min(calc(100% - 7rem), 1700px);
  min-height: 770px;
  margin: 0 auto;
  padding: 78px 0 86px;
}

.about-hero__copy { min-width: 0; }
.about-hero h1 {
  max-width: 690px;
  margin: 0;
  color: var(--text);
  font-size: clamp(40px, 2.4vw + 22px, 64px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.about-hero__copy > p {
  max-width: 670px;
  margin: 2rem 0 0;
  color: #697997;
  font-size: clamp(1.08rem, 1.4vw, 1.45rem);
  line-height: 1.48;
  text-wrap: pretty;
}

.about-hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; margin-top: 2.6rem; }
.about-hero__primary {
  display: inline-flex;
  min-width: min(100%, 405px);
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .9rem 2rem;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 18px 34px -24px rgba(18,101,239,.75);
  color: #fff;
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}
.about-hero__primary:hover { background: #0d54d4; color: #fff; transform: translateY(-1px); }
.about-hero__secondary { color: #152039; font-size: 1rem; text-decoration: underline; text-decoration-color: #9eaabd; text-underline-offset: .42rem; }
.about-hero__secondary:hover { color: var(--blue); }
.about-hero__primary:focus-visible, .about-hero__secondary:focus-visible { outline: 3px solid rgba(18,101,239,.34); outline-offset: 4px; }

.about-hero__services { display: flex; flex-wrap: wrap; gap: .7rem 1.3rem; margin: 4.4rem 0 0; padding: 0; color: var(--text-secondary); list-style: none; }
.about-hero__services li { display: flex; align-items: center; gap: 1.3rem; font-size: .98rem; white-space: nowrap; }
.about-hero__services li:not(:last-child)::after { color: #526481; content: '•'; }

.about-hero__media {
  position: relative;
  height: 620px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #dce2eb;
  border-radius: 16px;
  background: #eef2f6;
  box-shadow: 0 28px 70px -55px rgba(20,43,80,.55);
}
.about-hero__media img {
  position: absolute;
  top: 50%;
  right: -6%;
  width: auto;
  max-width: none;
  height: 135%;
  transform: translateY(-50%);
}

@media (max-width: 1120px) {
  .about-hero__inner { grid-template-columns: 1fr; width: min(calc(100% - 5rem), 880px); gap: 4rem; padding-block: 6rem; }
  .about-hero__copy { text-align: center; }
  .about-hero h1, .about-hero__copy > p { margin-inline: auto; }
  .about-hero__actions { align-items: center; }
  .about-hero__services { justify-content: center; margin-top: 3.2rem; }
  .about-hero__media { height: auto; aspect-ratio: 1.5 / 1; }
}

@media (max-width: 680px) {
  .about-hero__inner { width: min(calc(100% - 2rem), 38rem); gap: 3rem; padding: 4.5rem 0 5rem; }
  .about-hero h1 { font-size: clamp(32px, 9.6vw, 40px); line-height: .98; }
  .about-hero__copy > p { margin-top: 1.5rem; font-size: 1.04rem; line-height: 1.55; }
  .about-hero__actions { gap: 1.35rem; margin-top: 2rem; }
  .about-hero__primary { width: 100%; min-width: 0; padding-inline: 1.15rem; font-size: .92rem; }
  .about-hero__services { justify-content: flex-start; gap: .7rem 1rem; margin-top: 2.75rem; }
  .about-hero__services li { gap: 1rem; font-size: .88rem; }
  .about-hero__media { border-radius: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__primary { transition: none; }
}

/* Über uns: Arbeitsweise */
.about-work {
  overflow: hidden;
  padding: clamp(3rem, 4vw, 4.5rem) 0;
  background: #fff;
  color: var(--text);
}
.about-work *, .about-work *::before, .about-work *::after { box-sizing: border-box; }
.about-work__inner {
  display: grid;
  grid-template-columns: minmax(0, 2.02fr) minmax(31rem, .98fr);
  align-items: stretch;
  gap: clamp(3.5rem, 4.4vw, 5.5rem);
  width: min(calc(100% - 7rem), 1764px);
  margin: 0 auto;
}
.about-work__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(3.7rem, 4.7vw, 5.4rem) 0 clamp(2rem, 3vw, 3.5rem);
}
.about-work__eyebrow {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.about-work__eyebrow span { width: 2.75rem; height: 2px; flex: 0 0 auto; background: var(--blue); }
.about-work h2 {
  margin: clamp(3.1rem, 4.2vw, 5rem) 0 0;
  color: var(--text);
  font-size: clamp(32px, 2.6vw + 20px, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.about-work__intro {
  max-width: 69rem;
  margin: 1.7rem 0 0;
  color: var(--text-secondary);
  font-size: clamp(1.2rem, 1.43vw, 1.72rem);
  line-height: 1.42;
  text-wrap: pretty;
}
.about-work__principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 4.7vw, 5.8rem);
  margin-top: auto;
  padding-top: clamp(4rem, 6.5vw, 7.2rem);
}
.about-work__principles article { padding-top: 2.25rem; border-top: 1px solid #b8c8e1; }
.about-work__principles h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(24px, 1.4vw + 16px, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.about-work__principles p {
  margin: 1.55rem 0 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.15vw, 1.35rem);
  line-height: 1.48;
  text-wrap: pretty;
}
.about-work__media {
  position: relative;
  min-height: 44.6rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d6dce5;
  border-radius: .75rem;
  background: #eef1f4;
}
.about-work__media img {
  position: absolute;
  top: 50%;
  right: -2%;
  width: auto;
  max-width: none;
  height: 113.5%;
  transform: translateY(-50%);
}

@media (max-width: 1120px) {
  .about-work__inner { grid-template-columns: 1fr; width: min(calc(100% - 5rem), 880px); }
  .about-work__content { padding-bottom: 0; }
  .about-work__principles { margin-top: 0; padding-top: 4.5rem; }
  .about-work__media { min-height: 0; aspect-ratio: 1.22 / 1; }
}

@media (max-width: 680px) {
  .about-work { padding: 4rem 0; }
  .about-work__inner { width: min(calc(100% - 2rem), 38rem); gap: 3.5rem; }
  .about-work__content { padding-top: 0; }
  .about-work__eyebrow { gap: .8rem; font-size: .73rem; letter-spacing: .06em; }
  .about-work__eyebrow span { width: 1.8rem; }
  .about-work h2 { margin-top: 2.6rem; font-size: clamp(32px, 2.6vw + 20px, 48px); }
  .about-work__intro { margin-top: 1.4rem; font-size: 1.05rem; }
  .about-work__principles { grid-template-columns: 1fr; gap: 2.2rem; padding-top: 3.7rem; }
  .about-work__principles article { padding-top: 1.35rem; }
  .about-work__principles h3 { font-size: clamp(24px, 1.4vw + 16px, 36px); }
  .about-work__principles p { margin-top: .75rem; font-size: 1rem; }
  .about-work__media { aspect-ratio: .84 / 1; border-radius: .65rem; }
}

/* Über uns: Anspruch */
.about-claim {
  overflow: hidden;
  padding: clamp(2.5rem, 4vw, 4.25rem) 0;
  background: #fff;
  color: var(--text);
}
.about-claim *, .about-claim *::before, .about-claim *::after { box-sizing: border-box; }
.about-claim__inner {
  display: grid;
  grid-template-columns: minmax(34rem, .83fr) minmax(44rem, 1.17fr);
  align-items: stretch;
  gap: clamp(4rem, 5.2vw, 6.4rem);
  width: min(calc(100% - 7rem), 1770px);
  margin: 0 auto;
}
.about-claim__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 3vw, 3.6rem) 0;
}
.about-claim__eyebrow {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin: 0 0 clamp(3.7rem, 5.1vw, 6.1rem);
  color: var(--text-secondary);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.about-claim__eyebrow span { width: 2.75rem; height: 2px; flex: 0 0 auto; background: var(--blue); }
.about-claim h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(32px, 2.6vw + 20px, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.about-claim__content > p:not(.about-claim__eyebrow) {
  max-width: 45rem;
  margin: 2rem 0 0;
  color: var(--text-secondary);
  font-size: clamp(1.16rem, 1.45vw, 1.78rem);
  line-height: 1.42;
  text-wrap: pretty;
}
.about-claim__content > p + p:not(.about-claim__eyebrow) { margin-top: 2.5rem; }
.about-claim strong { color: var(--blue); font-weight: 700; }
.about-claim__media {
  position: relative;
  min-height: 45.25rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d6dce5;
  border-radius: .72rem;
  background: #eef1f4;
}
.about-claim__media img {
  position: absolute;
  top: 50%;
  right: -1.7%;
  width: auto;
  max-width: none;
  height: 111.5%;
  transform: translateY(-50%);
}

@media (max-width: 1120px) {
  .about-claim__inner { grid-template-columns: 1fr; width: min(calc(100% - 5rem), 880px); }
  .about-claim__content { padding-bottom: 0; }
  .about-claim__eyebrow { margin-bottom: 3.5rem; }
  .about-claim__media { min-height: 0; aspect-ratio: 1.37 / 1; }
}

@media (max-width: 680px) {
  .about-claim { padding: 4rem 0; }
  .about-claim__inner { width: min(calc(100% - 2rem), 38rem); gap: 3.5rem; }
  .about-claim__content { padding-top: 0; }
  .about-claim__eyebrow { gap: .8rem; margin-bottom: 2.6rem; font-size: .73rem; letter-spacing: .06em; }
  .about-claim__eyebrow span { width: 1.8rem; }
  .about-claim h2 { font-size: clamp(32px, 2.6vw + 20px, 48px); }
  .about-claim__content > p:not(.about-claim__eyebrow) { margin-top: 1.5rem; font-size: 1.05rem; }
  .about-claim__content > p + p:not(.about-claim__eyebrow) { margin-top: 2rem; }
  .about-claim__media { aspect-ratio: .88 / 1; border-radius: .65rem; }
}

/* Über uns: Regionalität */
.about-region {
  position: relative;
  min-height: clamp(38rem, 40vw, 49.5rem);
  overflow: hidden;
  background: #fff;
  color: var(--text);
}
.about-region *, .about-region *::before, .about-region *::after { box-sizing: border-box; }
.about-region__visual,
.about-region__overlay { position: absolute; inset: 0; margin: 0; }
.about-region__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-region__overlay {
  z-index: 1;
  background: linear-gradient(90deg, #fff 0%, #fff 36%, rgba(255,255,255,.94) 45%, rgba(255,255,255,.56) 57%, rgba(255,255,255,0) 70%);
}
.about-region__inner {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  align-items: center;
  width: min(calc(100% - 9rem), 1690px);
  margin: 0 auto;
}
.about-region__content { width: min(46rem, 46%); padding: 4rem 0; }
.about-region__eyebrow {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 clamp(2.7rem, 4vw, 4.6rem);
  color: var(--text-secondary);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.about-region__eyebrow span { width: 2.6rem; height: 2px; flex: 0 0 auto; background: var(--blue); }
.about-region h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(32px, 2.6vw + 20px, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.about-region__content > p:not(.about-region__eyebrow) {
  max-width: 43rem;
  margin: 1.8rem 0 0;
  color: var(--text-secondary);
  font-size: clamp(1.18rem, 1.42vw, 1.72rem);
  line-height: 1.43;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .about-region { display: grid; min-height: 0; }
  .about-region__visual { position: relative; order: 2; aspect-ratio: 1.25 / 1; }
  .about-region__visual img { object-position: right center; }
  .about-region__overlay { display: none; }
  .about-region__inner { width: min(calc(100% - 5rem), 880px); min-height: 0; padding: 6rem 0 4.5rem; }
  .about-region__content { width: min(100%, 44rem); padding: 0; }
}

@media (max-width: 680px) {
  .about-region__inner { width: min(calc(100% - 2rem), 38rem); padding: 4.5rem 0 3.5rem; }
  .about-region__eyebrow { gap: .8rem; margin-bottom: 2.6rem; font-size: .73rem; letter-spacing: .06em; }
  .about-region__eyebrow span { width: 1.8rem; }
  .about-region h2 { font-size: clamp(32px, 2.6vw + 20px, 48px); }
  .about-region__content > p:not(.about-region__eyebrow) { margin-top: 1.5rem; font-size: 1.05rem; }
  .about-region__visual { aspect-ratio: 1 / 1; }
}
