/* =========================================================
   AddiSol – About Next v2
   ========================================================= */

.about-next{
  width:100%;
  padding:1.5rem 0 4rem;
}

.about-next-eyebrow{
  margin:0 0 .8rem;
  color:var(--accent-dark);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* =========================================================
   Gemeinsame Kartenoptik
   ========================================================= */

.about-next-intro,
.about-next-vision,
.about-next-section,
.about-next-bottom-card{
  border:1px solid rgba(0,0,0,.07);
  border-radius:18px;
  background:rgba(255,255,255,.60);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(8px);
}


/* =========================================================
   INTRO / HEADER
   ========================================================= */

.about-next-intro{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:center;

  padding:clamp(2.5rem,5vw,4.5rem);

  overflow:hidden;
}

.about-next-intro-copy{
  min-width:0;
  padding:0;
}

.about-next-intro h1{
  max-width:720px;
  margin:0;

  color:var(--text-main);

  font-size:clamp(2.8rem,5vw,4.8rem);
  line-height:1.03;
  letter-spacing:-.035em;
}

.about-next-intro-copy > p:not(.about-next-eyebrow){
  max-width:620px;

  margin:1.5rem 0 0;

  color:var(--text-soft);

  font-size:1.05rem;
  line-height:1.75;
}

.about-next-intro-image{
  width:100%;
  margin:0;

  overflow:hidden;

  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;

  background:rgba(255,255,255,.45);

  box-shadow:var(--shadow-soft);
}

.about-next-intro-image img{
  display:block;

  width:100%;
  height:100%;

  aspect-ratio:4 / 3;

  object-fit:cover;
}


/* =========================================================
   VISION
   ========================================================= */

.about-next-vision{
  margin-top:1.5rem;

  padding:clamp(2.5rem,6vw,5rem);

  text-align:center;
}

.about-next-vision h2{
  max-width:900px;
  margin:0 auto;

  font-size:clamp(1.9rem,3.2vw,3.2rem);
  line-height:1.15;
  letter-spacing:-.02em;
}

.about-next-vision h2 span{
  display:block;

  margin-top:.5rem;

  color:var(--warm-main);
}

.about-next-vision > p:last-child{
  max-width:760px;

  margin:1.5rem auto 0;

  color:var(--text-soft);

  font-size:1.05rem;
  line-height:1.75;
}


/* =========================================================
   ALLGEMEINE SEKTIONEN
   ========================================================= */

.about-next-section{
  margin-top:1.5rem;

  padding:clamp(1.7rem,4vw,3rem);
}

.about-next-heading{
  max-width:820px;

  margin-bottom:2rem;
}

.about-next-heading-centered{
  margin-right:auto;
  margin-left:auto;

  text-align:center;
}

.about-next-heading h2,
.about-next-solution h2,
.about-next-bottom-card h2{
  margin:0 0 .8rem;

  font-size:clamp(1.9rem,3.3vw,2.8rem);
  line-height:1.18;
}

.about-next-heading > p:not(.about-next-eyebrow),
.about-next-solution-copy > p,
.about-next-bottom-copy > p:not(.about-next-eyebrow){
  color:var(--text-soft);

  line-height:1.7;
}


/* =========================================================
   PROBLEM / DATEN
   ========================================================= */

.about-next-data-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem;
}

.about-next-data-card{
  display:flex;
  flex-direction:column;

  padding:clamp(1.4rem,3vw,2rem);

  border:1px solid rgba(0,0,0,.07);
  border-radius:14px;

  background:rgba(255,255,255,.52);
}

.about-next-data-value{
  color:var(--warm-main);

  font-family:var(--font-headline);
  font-size:clamp(2.6rem,5vw,4.6rem);
  font-weight:700;
  line-height:1;
}

.about-next-data-card h3{
  margin:.55rem 0 0;

  font-size:1.1rem;
}

.about-next-data-card > p{
  margin:1rem 0 1.4rem;

  color:var(--text-soft);

  line-height:1.6;
}

.about-next-cost-chart{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.5rem;

  align-items:end;

  min-height:180px;

  padding:1rem 0;

  border-bottom:1px solid var(--line-soft);
}

.about-next-cost-column{
  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:flex-end;
}

.about-next-cost-value{
  margin-bottom:.35rem;

  color:var(--text-soft);

  font-size:.72rem;
}

.about-next-cost-bar-wrap{
  display:flex;

  height:130px;

  align-items:flex-end;
}

.about-next-cost-bar{
  width:34px;

  min-height:42px;
  max-height:125px;

  border-radius:5px 5px 0 0;

  background:linear-gradient(
    180deg,
    var(--warm-soft),
    var(--warm-main)
  );
}

.about-next-cost-year{
  margin-top:.5rem;

  color:var(--text-meta);

  font-size:.73rem;
}

.about-next-carbon-visual{
  display:grid;
  grid-template-columns:1fr 1fr;

  overflow:hidden;

  margin:.5rem 0 1rem;

  border-radius:10px;
}

.about-next-carbon-half{
  display:flex;

  min-height:100px;

  align-items:center;
  justify-content:center;

  padding:1rem;

  text-align:center;

  font-weight:700;
}

.about-next-carbon-embodied{
  background:rgba(201,138,58,.18);

  color:var(--warm-hover);
}

.about-next-carbon-use{
  background:rgba(58,110,165,.10);

  color:var(--accent-dark);
}

.about-next-data-detail{
  margin:.2rem 0 1rem !important;

  padding:.9rem 1rem;

  border-left:3px solid var(--accent-main);

  background:rgba(58,110,165,.05);

  font-size:.9rem;
}

.about-next-source{
  margin-top:auto;

  padding-top:.8rem;

  color:var(--text-meta);

  font-size:.7rem;
  line-height:1.4;

  text-decoration:none;
}

.about-next-source:hover{
  color:var(--accent-dark);
}

.about-next-problem-conclusion{
  margin-top:1.2rem;

  padding:1.3rem 1.5rem;

  border-left:4px solid var(--warm-main);

  background:rgba(201,138,58,.07);

  font-family:var(--font-headline);
  font-size:clamp(1.05rem,2vw,1.32rem);
  line-height:1.5;
}


/* =========================================================
   LÖSUNG
   ========================================================= */

.about-next-solution{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
  gap:clamp(2rem,4vw,4rem);

  align-items:stretch;
}

.about-next-process{
  margin-top:1.6rem;
}

.about-next-process-step{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:1rem;

  padding:1.1rem 0;

  border-top:1px solid rgba(0,0,0,.07);
}

.about-next-process-step:last-child{
  border-bottom:1px solid rgba(0,0,0,.07);
}

.about-next-process-number{
  color:var(--warm-main);

  font-family:var(--font-headline);
  font-size:1.35rem;
  font-weight:700;
}

.about-next-process-step h3{
  margin:0 0 .3rem;

  font-size:1.05rem;
}

.about-next-process-step p{
  margin:0;

  color:var(--text-soft);

  line-height:1.6;
}

.about-next-media-card{
  align-self:end;

  display:grid;
  grid-template-rows:1fr auto;

  height:calc(100% - 145px);

  margin:145px 0 0;

  overflow:hidden;

  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;

  background:rgba(255,255,255,.45);
}

.about-next-media-card img{
  display:block;

  width:100%;
  height:100%;

  min-height:0;

  object-fit:cover;
}

.about-next-media-card figcaption{
  padding:.8rem 1rem;

  border-top:1px solid var(--line-soft);

  color:var(--text-soft);

  font-size:.84rem;
}


/* =========================================================
   POTENZIAL
   ========================================================= */

.about-next-potential-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.about-next-potential-card{
  padding:1.5rem;

  border:1px solid rgba(0,0,0,.07);
  border-radius:13px;

  background:rgba(255,255,255,.52);
}

.about-next-potential-line{
  width:42px;
  height:3px;

  margin-bottom:1.1rem;

  background:var(--warm-main);
}

.about-next-potential-card h3{
  margin:0 0 .9rem;

  font-size:1.12rem;
}

.about-next-potential-card ul{
  margin:0;

  padding-left:1.15rem;

  color:var(--text-soft);
}

.about-next-potential-card li{
  margin:.55rem 0;

  line-height:1.5;
}


/* =========================================================
   FORSCHUNG & ENTWICKLUNG
   ========================================================= */

.about-next-research-main{
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(0,1fr);
  gap:1.5rem;
}

.about-next-research-image{
  overflow:hidden;

  border-radius:14px;
}

.about-next-research-image img{
  display:block;

  width:100%;
  height:100%;

  min-height:430px;

  object-fit:cover;
}

.about-next-research-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.about-next-research-fields article{
  padding:1.25rem;

  border:1px solid rgba(0,0,0,.07);
  border-radius:12px;

  background:rgba(255,255,255,.48);
}

.about-next-research-fields h3{
  margin:0 0 .45rem;

  font-size:1rem;
}

.about-next-research-fields p{
  margin:0;

  color:var(--text-soft);

  line-height:1.55;
}


/* =========================================================
   ROADMAP
   ========================================================= */

.about-next-roadmap{
  position:relative;

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;

  margin-top:2rem;

  padding-top:.5rem;
}

.about-next-roadmap::before{
  content:"";

  position:absolute;

  top:17px;
  left:8%;
  right:8%;

  height:2px;

  background:var(--line-soft);
}

.about-next-roadmap-step{
  position:relative;

  z-index:1;

  padding:0 .7rem;

  text-align:center;
}

.about-next-roadmap-marker{
  width:20px;
  height:20px;

  margin:0 auto 1rem;

  border:4px solid var(--bg-main);
  border-radius:50%;

  background:var(--line-soft);

  box-shadow:0 0 0 1px var(--line-soft);
}

.about-next-roadmap-done .about-next-roadmap-marker{
  background:var(--accent-main);
}

.about-next-roadmap-active .about-next-roadmap-marker{
  background:var(--warm-main);

  box-shadow:0 0 0 5px rgba(201,138,58,.14);
}

.about-next-roadmap-step h3{
  margin:0 0 .35rem;

  font-size:.94rem;
}

.about-next-roadmap-step p{
  margin:0;

  color:var(--text-meta);

  font-size:.78rem;
  line-height:1.4;
}


/* =========================================================
   TEAM + PROJEKTFORTSCHRITT
   ========================================================= */

.about-next-bottom-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;

  margin-top:1.5rem;
}

.about-next-bottom-card{
  display:grid;
  grid-template-rows:auto 230px;

  overflow:hidden;

  padding-bottom:1rem;
}

.about-next-bottom-copy{
  padding:clamp(1.5rem,3vw,2.2rem);
}

.about-next-bottom-copy > p:not(.about-next-eyebrow){
  min-height:4.8em;
}

.about-next-button{
  display:inline-flex;

  min-height:44px;

  align-items:center;
  justify-content:center;

  padding:.7rem 1.1rem;

  border:1px solid rgba(44,82,122,.38);
  border-radius:7px;

  background:rgba(255,255,255,.58);

  color:var(--accent-dark);

  font-size:.92rem;
  font-weight:600;

  text-decoration:none;
}

.about-next-bottom-image{
  margin:0 1rem;

  overflow:hidden;

  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;

  background:rgba(255,255,255,.45);

  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.about-next-bottom-image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:980px){

  .about-next-intro{
    grid-template-columns:1fr;

    gap:2rem;

    align-items:start;
  }

  .about-next-intro h1{
    max-width:none;
  }

  .about-next-intro-image{
    max-width:700px;
  }

  .about-next-solution,
  .about-next-research-main{
    grid-template-columns:1fr;
  }

  .about-next-data-grid,
  .about-next-potential-grid{
    grid-template-columns:1fr;
  }

  .about-next-media-card{
    height:auto;
    margin:0;
  }

  .about-next-media-card img{
    height:auto;
    max-height:430px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  .about-next{
    padding-top:.75rem;
  }

  .about-next-intro,
  .about-next-vision,
  .about-next-section{
    padding:1.5rem;
  }

  .about-next-research-fields,
  .about-next-bottom-grid{
    grid-template-columns:1fr;
  }

  .about-next-roadmap{
    grid-template-columns:1fr;
    gap:1.1rem;

    padding-left:1rem;
  }

  .about-next-roadmap::before{
    top:1rem;
    bottom:1rem;
    left:20px;
    right:auto;

    width:2px;
    height:auto;
  }

  .about-next-roadmap-step{
    display:grid;
    grid-template-columns:40px 1fr;
    gap:.8rem;

    padding:0;

    text-align:left;
  }

  .about-next-roadmap-marker{
    margin:0;
  }

  .about-next-bottom-copy > p:not(.about-next-eyebrow){
    min-height:0;
  }
}


@media(max-width:520px){

  .about-next-intro h1{
    font-size:2.45rem;
  }

  .about-next-intro-image img{
    aspect-ratio:4 / 3;
  }

  .about-next-cost-bar{
    width:24px;
  }

  .about-next-media-card img{
    height:320px;
  }
}