/* ==================================================
   1. Variablen und Grundeinstellungen
   ================================================== */

:root {
  --blue:#113f93;
  --light:#f1f3f7;
  --dark:#090b10;
  --white:#fff
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:#13151a;
  background: #fff;   /* var(--light) */
  line-height:1.5
}

.wrap {
  width:min(1640px, calc(100% - 8vw));
  margin:auto;
  padding: 3vh 0 0 0;   /* nuevo */
}

.narrow {
  width:min(1120px, calc(100% - 8vw))
}

.section-pad {
  padding: 1vh 0 12vh 0;   /*  clamp(70px, 5vw, 170px) 0 */   /* clamp(70px, 10vw, 170px) 0 */
}

/* ==================================================
   2. Kopfbereich
   ================================================== */

.header {
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  width:100%;
  padding: 28px 2vw   /* 28px 4vw */
}

.header img {
  width: 240px;   /* 223px */
  max-width:55vw
}

/* ==================================================
   3. Hero-Bereich
   ================================================== */

.hero {
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden
}

.hero video, .shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.shade {
  background:rgba(0, 0, 0, .25)   /* rgba(0, 0, 0, .69) */
}

.hero-copy {
  position:relative;
  z-index:1;
  width: min(1400px, 90vw);   /* min(1200px, 92vw) */
  margin: auto;   /* 8vh auto 0 */
  }

.hero h1 {
  font-size: clamp(4.2rem, 12vw, 11rem);
  line-height: .9;   /* .82 */
  letter-spacing: -.02em;   /* -.07em */
  margin: 30vh 0 4vh;   /* 0 0 12vh */
  font-weight: 800;
  text-align: right;   /* nuevo */
  display: flex; justify-content: center; width: 100%;
}

.hero p {
  /* max-width:850px; */
  font-size:clamp(2rem, 3.4vw, 3.8rem);
  line-height:1.25;
  font-weight:700;
  text-align: center;   /* nuevo */
  display: flex; justify-content: center; width: 100%;
}


/* ==================================================
   4. Prozessbereich und Karten
   ================================================== */

.process {
  min-height:180vh;
  background:#f3f4f6
}

.process h2 {
  font-size: clamp(2rem, 3.4vw, 3.8rem);   /* clamp(2rem, 4.2vw, 4.7rem) */
  line-height:1.05;
    font-weight:700;
  display: flex; justify-content: center; width: 100%;
}

 font-size: {
	clamp(2rem, 3.4vw, 3.8rem);
    line-height: 1.05;
    max-width: 1420px;
}

.cards {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;   /* 22px */
  margin: 0 10% 0 10%;   /* nuevo */
  /* display: flex; justify-content: center; width: 100%; */
}

.cards article {
  background: #50552d;   /* #153f91 */
  color:#fff;
  padding: 18px;   /* 14px */
  border-radius:5px;
  font-size: 1.2rem   /* 1.04rem */
}

.cards img {
  width:100%;
  display:block;
  border-radius:5px
}

.cards p {
  min-height: 4em   /* 5.5em */
}

/* ==================================================
   COMPARACION (del otro diseño)
   ================================================== */
   
.comparison {
  display: flex;
  align-items: center;
  gap: 30px;   /* 28px */
  margin: 6vh 0 8vh 0;   /* 40px 0 */
  display: flex; justify-content: center; width: 100%;
}
.comparison > div:not(.comparison-arrow) {
  display: flex;
  align-items: center;
  gap: 22px;   /* 18px */
}
.comparison strong {
  /* font-family: "Montserrat", sans-serif; */
  font-size: clamp(2.2rem, 3.6vw, 4rem);   /* 39px */
  line-height: 1;
}
.comparison span {
  color: #13151a;   /* #dfe3df */
  font-size: 1.7rem;   /* 14 px */
  line-height: 1.2;
}
.comparison .highlight strong {
  color: #9ac31c;   /* var(--green) */
}
.comparison-arrow {
  color: #9ac31c;   /* var(--green) */
  font-size: 4rem;   /* 35px */
}

/* ==================================================
   5. Ära- und Profilbereich
   ================================================== */

.era {
  background: #50552d;   /* var(--blue) */
  color:#fff;
  padding: 5vh 0 5vh 0;   /* nuevo */
}

.era h2 {     /*, .footer h2 */
  font-family: Arial, Helvetica, sans-serif;   /* nuevo */
  font-size: clamp(2rem, 3.4vw, 3.8rem);   /* clamp(3.5rem, 8vw, 8rem) */
  line-height: 1.05;   /* .9 */
  /* letter-spacing:-.055em; */
  margin:0 0 60px
}

.lead {
  font-size:clamp(1.25rem, 2vw, 2rem)
}

.profiles {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap: 2vw;   /* 5vw; */
  align-items:start;
  margin: 0 10% 0 10%;   /* margin-top:120px; */
  /*display: flex;*/
  justify-content: center;
  width: 80%;
}

.profiles h3 {
  font-family: Arial, Helvetica, sans-serif;   /* nuevo */
  font-size: clamp(1.8rem, 3vw, 3rem);   /* clamp(2.8rem, 5vw, 5.8rem) */
  line-height: 1.05;
  margin: 4vh 0 4vh 0;   /* 0 0 45px */
}

.profiles ul {
  padding-left:1.2rem
}

.profiles li {
	font-family: Arial, Helvetica, sans-serif;   /* nuevo */
	font-size: 1.4rem;
	line-height: 1.2;
  margin:0 0 10px   /* 0 0 13px */
}

.profiles img {
  width:100%;
  max-height: 950px;
  object-fit: fill;   /* contain */
}

/* ==================================================
   6. Videobereich
   ================================================== */

.videos {
  background:#fff
}

.video-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px
}

.video-grid h2 {
  font-size:clamp(1.6rem, 2.6vw, 2.8rem)   /* clamp(1.8rem, 3vw, 3rem) */
}

.video-grid video {
  width:100%;
  background:#000;
  aspect-ratio:16/9
}

/* ==================================================
   7. Fußbereich und Kontakt
   ================================================== */

.footer {
  background: #50552d;   /* var(--blue) */
  color: #fff;
  min-height:100vh;   /* 96vh */
  display:flex;
  align-items:center
}


  
.footer h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(2rem, 3.4vw, 3.8rem);
    line-height: 1.05;
    margin: 25% 0 25% 0;   /* margin: 0 0 60px; */
	text-align: center;
}



.contact {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items: center;   /* start */
}

.contact img {
  width: 240px;   /* 300px */
  max-width: 55vw;   /* 100% */
    display: flex;                 /* Activa Flexbox */
    justify-content: flex-end;     /* Alinea el contenido a la derecha */
  margin: 4vh 0 4vh 0;   /* nuevo */
}

.contact h3 {
  font-size:2rem;
  /* margin-top:0 */
}

.footer blockquote {
  text-align:center;
  font-size:clamp(1.2rem, 2vw, 2rem);
  font-style:italic;
  margin: 4vh auto 4vh;   /* 90px auto 40px */
  color: #fff;   /* nuevo */
}

.footer a {
  color:inherit
}

@media (max-width: 900px) {
  .cards {
    grid-template-columns:1fr 1fr
  }
  .profiles {
    grid-template-columns:1fr
  }
  .profiles img {
    max-height:650px
  }
  .video-grid, .contact {
    grid-template-columns:1fr
  }
  .hero h1 {
    margin-bottom:16vh
  }
  .process {
    min-height:auto
  }
}

@media (max-width: 560px) {
  .cards {
    grid-template-columns:1fr
  }
  .header {
    padding-top:20px
  }
  .section-pad {
    padding:70px 0
  }
  .hero-copy {
    margin-top:18vh
  }
  .hero h1 {
    font-size:4rem
  }
  .profiles {
    margin-top:70px
  }
  .cards p {
    min-height:0
  }
}