:root{
  --ink:#07151d;
  --ink2:#0b1d26;
  --petrol:#196771;
  --teal:#2b9da3;
  --white:#fff;
  --paper:#f4f6f5;
  --text:#d7e1e2;
  --dark:#18313a
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink);
  color:#fff;
  font-family:Inter,Arial,sans-serif;
  line-height:1.55
}

/* HEADER */

.nav{
  height:100px;
  padding:0 max(5vw,28px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.97);
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid #dfe7e5;
  box-shadow:0 4px 18px rgba(4,20,28,.07);
  backdrop-filter:blur(12px)
}

.brand{
  display:flex;
  align-items:center;
  gap:28px
}

.brand img{
  object-fit:contain;
  display:block;
  image-rendering:auto
}

/* Mader & Rixen Logo */
.brand .mr-logo{
  width:auto;
  height:68px;
  max-height:68px;
  flex:none
}

/* CraftLine Logo mit Schriftzug */
.brand .craft{
  width:auto;
  height:58px;
  max-height:58px;
  flex:none
}

nav{
  display:flex;
  gap:30px;
  align-items:center
}

nav a,
footer a{
  color:#17313a;
  text-decoration:none;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em
}

.navcta{
  border:1px solid #196771;
  padding:11px 16px;
  border-radius:3px;
  color:#fff;
  background:#196771
}

.menu{
  display:none;
  background:none;
  border:0;
  color:#17313a;
  font-size:26px
}

/* HERO */

.hero{
  min-height:760px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:50px;
  align-items:center;
  padding:80px max(7vw,40px);
  background:
    radial-gradient(circle at 80% 30%,#123844 0,transparent 33%),
    linear-gradient(135deg,#07151d,#0b1d26)
}

.eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  font-weight:800;
  color:#62b9bd;
  margin:0 0 22px
}

.eyebrow.dark{color:var(--petrol)}

h1,h2{
  font-size:clamp(43px,5vw,76px);
  line-height:1.03;
  margin:0 0 28px;
  letter-spacing:-.035em
}

h1 span,h2 span{color:#63b9bd}

.lead{
  font-size:20px;
  color:var(--text);
  max-width:760px
}

.actions{
  display:flex;
  gap:14px;
  margin:38px 0
}

.btn{
  display:inline-block;
  padding:15px 22px;
  text-decoration:none;
  font-weight:700;
  border-radius:3px
}

.primary{
  background:#1e7c85;
  color:#fff
}

.ghost{
  border:1px solid #45636c;
  color:#fff
}

.facts{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  color:#9fb3b7;
  font-size:13px
}

.facts span+span:before{
  content:'•';
  margin-right:20px;
  color:#318f96
}

.hero-visual{position:relative}

.hero-visual img{
  width:100%;
  background:#fff;
  border-radius:8px;
  box-shadow:0 40px 100px #0008
}

.score{
  position:absolute;
  z-index:2;
  right:-10px;
  top:-55px;
  background:#0e2831;
  border:1px solid #29505a;
  padding:18px 24px;
  box-shadow:0 20px 50px #0007
}

.score small,
.score span{
  display:block;
  color:#a8bdc0
}

.score strong{
  font-size:50px;
  color:#68c0c3
}

.light{
  background:var(--paper);
  color:var(--dark)
}

/* INTRO */

.intro{
  padding:100px max(10vw,40px);
  text-align:center
}

.intro h2,
.report h2,
.about h2{
  font-size:clamp(38px,4vw,62px)
}

.wide{
  max-width:940px;
  margin:0 auto;
  font-size:19px
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:55px;
  text-align:left
}

.cards article{
  background:#fff;
  padding:32px;
  border-top:3px solid var(--petrol)
}

.cards b{
  color:#5e969b;
  font-size:13px
}

.cards h3{
  font-size:25px;
  margin:12px 0
}

/* METHOD */

.method{
  padding:100px max(8vw,40px);
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  align-items:center;
  gap:70px;
  border-top:1px solid rgba(255,255,255,.08)
}

.method h2{
  font-size:clamp(42px,5vw,68px)
}

.method p{
  color:#b9c8ca;
  font-size:18px
}

.method-img img{
  width:100%;
  border-radius:8px
}

.textlink{
  color:#68c0c3;
  text-decoration:none;
  font-weight:700
}

/* REPORT */

.report{
  padding:100px max(8vw,40px);
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:80px;
  align-items:start
}

.cover{
  text-align:center;
  perspective:1000px
}

.cover img{
  width:min(100%,480px);
  box-shadow:0 35px 70px #0016;
  transform:rotateY(4deg) rotateZ(-1deg)
}

.darklead{color:#466069}

.report ul{
  list-style:none;
  padding:0;
  margin:30px 0
}

.report li{
  padding:13px 0;
  border-bottom:1px solid #d9e1df
}

.report-process img{
  width:100%;
  max-width:680px;
  margin-top:25px
}

/* QUESTIONS */

.questions{
  padding:100px max(10vw,40px)
}

.questions h2{
  font-size:clamp(38px,4.5vw,64px)
}

.questions b{
  color:#fff;
  font-size:20px
}

.qgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:#25404a;
  margin-top:45px
}

.qgrid p{
  margin:0;
  background:#0b1d26;
  padding:35px;
  font-size:18px
}

/* ABOUT */

.about{
  padding:100px max(8vw,40px);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:center
}

.about-img img{
  width:100%;
  border-radius:6px
}

.about p{font-size:18px}

/* CONTACT */

.contact{
  padding:100px max(8vw,40px);
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:80px;
  align-items:start;
  background:linear-gradient(135deg,#0a2029,#12333d)
}

.contact h2{
  font-size:clamp(38px,4.5vw,64px)
}

.contact p{
  color:#c3d2d4;
  font-size:18px
}

.contactbox{
  border-left:1px solid #47717a;
  padding-left:35px
}

.contactbox a{color:#fff}

.inverse{margin-top:15px}

/* FOOTER */

footer{
  padding:28px max(5vw,28px);
  display:flex;
  justify-content:space-between;
  color:#8da5aa;
  font-size:12px;
  border-top:1px solid #20343c
}

footer a{color:#fff}

/* V3 – VALUE-FIRST NARRATIVE */

.hero-photo{
  position:relative;
  align-self:stretch;
  min-height:560px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 40px 100px #0008
}

.hero-photo:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(7,21,29,.92) 100%)
}

.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}

.hero-quote{
  position:absolute;
  z-index:2;
  left:34px;
  right:34px;
  bottom:34px
}

.hero-quote strong{
  display:block;
  font-size:24px;
  line-height:1.2;
  margin-bottom:8px
}

.hero-quote span{color:#c5d5d7}

.riskline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#d7e0de;
  margin:55px auto 0;
  max-width:1200px;
  text-align:left
}

.riskline article{
  background:#fff;
  padding:30px
}

.riskline span{
  font-size:12px;
  font-weight:800;
  color:var(--petrol);
  letter-spacing:.12em
}

.riskline h3{
  font-size:20px;
  line-height:1.2;
  margin:14px 0 10px
}

.riskline p{
  font-size:15px;
  color:#587078;
  margin:0
}

.insight{
  max-width:920px;
  margin:70px auto 0;
  padding:42px 48px;
  background:#0b1d26;
  color:#fff;
  text-align:left;
  border-left:4px solid #2b9da3
}

.insight small{
  color:#63b9bd;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:800
}

.insight h3{
  font-size:30px;
  line-height:1.18;
  margin:15px 0
}

.insight h3 span{color:#63b9bd}

.insight p{
  color:#bdcdcf;
  font-size:17px;
  margin-bottom:0
}

/* V4 – CLEAN HERO + IMAGEFILM */

.hero-clean{
  display:block;
  min-height:auto;
  padding-top:110px;
  padding-bottom:100px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%,#123844 0,transparent 40%),
    linear-gradient(135deg,#07151d,#0b1d26)
}

.hero-clean .hero-copy{
  max-width:1120px;
  margin:0 auto
}

.hero-clean .lead{
  margin-left:auto;
  margin-right:auto;
  max-width:900px
}

.hero-clean .actions,
.hero-clean .facts{
  justify-content:center
}

.film-section{
  padding:25px max(8vw,40px) 105px;
  background:#07151d;
  text-align:center
}

.film-head{
  max-width:900px;
  margin:0 auto 42px
}

.film-head h2{
  font-size:clamp(38px,4.5vw,64px);
  margin-bottom:20px
}

.film-head p{
  color:#b9c8ca;
  font-size:18px;
  margin:0 auto;
  max-width:760px
}

.film-frame{
  max-width:1180px;
  margin:0 auto;
  padding:10px;
  background:#0d222b;
  border:1px solid #28454f;
  border-radius:10px;
  box-shadow:0 35px 90px #0008
}

.film-frame video{
  display:block;
  width:100%;
  height:auto;
  max-height:72vh;
  background:#000;
  border-radius:5px
}

/* KNOWLEDGE */

.knowledge{
  padding:100px max(8vw,40px)
}

.knowledge-head{max-width:820px}

.knowledge-head p{
  font-size:18px;
  color:#526b72
}

.knowledge-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:48px
}

.knowledge-grid a{
  display:block;
  background:#fff;
  color:#18313a;
  text-decoration:none;
  padding:34px;
  border-top:3px solid #196771;
  box-shadow:0 12px 35px rgba(12,40,48,.06);
  transition:.2s transform
}

.knowledge-grid a:hover{
  transform:translateY(-4px)
}

.knowledge-grid small{
  color:#196771;
  font-weight:800;
  letter-spacing:.14em
}

.knowledge-grid h3{
  font-size:25px;
  line-height:1.15
}

.knowledge-grid p{color:#587078}

.knowledge-grid b{color:#196771}

/* ARTICLES */

.article-hero{
  padding:105px max(12vw,40px) 75px;
  background:
    radial-gradient(circle at 80% 0%,#123844 0,transparent 35%),
    #07151d
}

.article-hero h1{max-width:1000px}

.article-hero .lead{max-width:900px}

.article{
  background:#f4f6f5;
  color:#18313a;
  padding:80px max(18vw,40px);
  font-size:19px
}

.article h2{
  font-size:38px;
  margin-top:50px
}

.article h2:first-child{margin-top:0}

.article-cta{
  margin-top:65px;
  background:#fff;
  padding:40px;
  border-left:4px solid #196771
}

.article-cta h3{
  font-size:28px;
  margin-top:0
}

/* LEGAL */

.legal{
  padding:150px 6vw 90px;
  min-height:70vh
}

.legal-inner{
  max-width:900px;
  margin:0 auto
}

.legal-inner h1{
  font-size:clamp(2.6rem,6vw,5rem);
  margin:10px 0 42px
}

.legal-inner h2{
  font-size:1.35rem;
  margin:38px 0 12px;
  color:#12313a
}

.legal-inner p,
.legal-inner li{
  color:#40545a;
  line-height:1.75
}

.legal-inner ul{
  padding-left:22px;
  margin:10px 0 20px
}

.legal-inner a{
  color:#196771;
  text-decoration:underline
}

/* WORKSHOPS */

.nav nav a.active{color:#196771}

.work-hero{
  padding:145px max(10vw,40px) 105px;
  background:
    radial-gradient(circle at 75% 5%,#123844 0,transparent 36%),
    linear-gradient(135deg,#07151d,#0b1d26)
}

.work-hero-inner{max-width:1050px}

.work-hero h1{
  font-size:clamp(48px,6vw,82px)
}

.work-hero .lead{max-width:930px}

.flow{
  display:flex;
  align-items:center;
  gap:20px;
  margin:38px 0 30px;
  color:#dce7e8;
  letter-spacing:.12em
}

.flow b{font-size:14px}

.flow i{
  font-style:normal;
  color:#63b9bd;
  font-size:24px
}

.work-areas{
  padding:100px max(6vw,32px);
  text-align:center
}

.work-areas h2,
.experts h2,
.work-process h2,
.work-cta h2{
  font-size:clamp(38px,4.5vw,62px)
}

.work-intro{
  max-width:930px;
  margin:0 auto 48px;
  font-size:19px;
  color:#526b72
}

.area-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  text-align:left
}

.area-grid article{
  background:#fff;
  padding:28px;
  min-height:220px;
  border-top:3px solid #196771;
  box-shadow:0 12px 30px rgba(12,40,48,.05)
}

.area-grid small,
.process-grid small{
  color:#196771;
  font-weight:900;
  letter-spacing:.12em
}

.area-grid h3{
  font-size:22px;
  line-height:1.12;
  margin:12px 0
}

.area-grid p{color:#587078}

.work-process{
  padding:100px max(7vw,35px);
  text-align:center
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#29434c;
  margin:50px auto 30px;
  max-width:1250px;
  text-align:left
}

.process-grid article{
  background:#0b1d26;
  padding:32px
}

.process-grid h3{font-size:22px}

.process-grid p{color:#b9c8ca}

.process-grid small{color:#63b9bd}

.process-end{
  max-width:1000px;
  margin:42px auto 0;
  font-size:24px;
  font-weight:700;
  color:#dce7e8
}

.experts{
  padding:100px max(8vw,40px)
}

.experts-head{max-width:950px}

.experts-head>p:last-child{
  font-size:19px;
  color:#526b72
}

.expert-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:50px
}

.expert-grid article{
  background:#fff;
  padding:28px;
  border-top:3px solid #196771
}

.expert-grid h3{
  font-size:20px;
  line-height:1.18;
  margin-top:0;
  min-height:72px
}

.expert-grid p{
  color:#587078;
  margin-top:0
}

.expert-note{
  margin-top:38px;
  padding:30px 34px;
  background:#0b1d26;
  color:#fff;
  border-left:4px solid #2b9da3
}

.expert-note strong{font-size:23px}

.expert-note p{
  color:#b9c8ca;
  margin-bottom:0
}

.work-cta{
  text-align:center;
  padding:105px max(8vw,40px);
  background:linear-gradient(135deg,#0a2029,#12333d)
}

.work-cta p{
  max-width:760px;
  margin:0 auto 30px;
  color:#c3d2d4;
  font-size:19px
}

/* RESPONSIVE */

@media(max-width:1100px){

  .expert-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .expert-grid h3{
    min-height:48px
  }
}

@media(max-width:1050px){

  .area-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .expert-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .process-grid{
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:900px){

  .nav{
    height:82px
  }

  .brand{
    gap:18px
  }

  .brand .mr-logo{
    width:auto;
    height:56px;
    max-height:56px
  }

  .brand .craft{
    width:auto;
    height:48px;
    max-height:48px
  }

  .menu{
    display:block
  }

  .nav nav{
    display:none;
    position:absolute;
    top:82px;
    left:0;
    right:0;
    background:#fff;
    border-top:1px solid #dfe7e5;
    padding:25px;
    flex-direction:column
  }

  .nav nav.open{
    display:flex
  }

  .hero,
  .method,
  .report,
  .about,
  .contact{
    grid-template-columns:1fr
  }

  .hero{
    padding-top:55px;
    min-height:auto
  }

  .hero-visual{
    margin-top:35px
  }

  .score{right:5px}

  .cards{
    grid-template-columns:1fr
  }

  .report .cover{
    order:2
  }

  .qgrid{
    grid-template-columns:1fr
  }

  .hero-photo{
    min-height:430px
  }

  .riskline{
    grid-template-columns:1fr 1fr
  }

  .hero-clean{
    padding-top:70px;
    padding-bottom:70px
  }

  .film-section{
    padding-top:10px;
    padding-bottom:75px
  }

  .knowledge-grid{
    grid-template-columns:1fr
  }
}

@media(max-width:760px){

  .legal{
    padding:120px 6vw 70px
  }
}

@media(max-width:650px){

  .expert-grid{
    grid-template-columns:1fr
  }

  .expert-grid h3{
    min-height:0
  }
}

@media(max-width:600px){

  .work-hero,
  .work-areas,
  .work-process,
  .experts,
  .work-cta{
    padding-left:22px;
    padding-right:22px
  }

  .flow{
    gap:9px;
    flex-wrap:wrap
  }

  .flow b{
    font-size:12px
  }

  .area-grid,
  .expert-grid,
  .process-grid{
    grid-template-columns:1fr
  }

  .area-grid article{
    min-height:auto
  }

  .process-end{
    font-size:20px
  }
}

@media(max-width:560px){

  .hero,
  .method,
  .report,
  .about,
  .contact,
  .intro,
  .questions{
    padding-left:22px;
    padding-right:22px
  }

  .brand{
    gap:10px
  }

  .brand .mr-logo{
    width:auto;
    height:48px;
    max-height:48px
  }

  .brand .craft{
    display:block;
    width:auto;
    height:40px;
    max-height:40px
  }

  .facts span+span:before{
    display:none
  }

  .facts{
    display:grid
  }

  .actions{
    flex-direction:column
  }

  .btn{
    text-align:center
  }

  .score{
    position:relative;
    right:auto;
    top:auto;
    margin-bottom:15px
  }

  .contactbox{
    border-left:0;
    border-top:1px solid #47717a;
    padding:25px 0 0
  }

  .riskline{
    grid-template-columns:1fr
  }

  .insight{
    padding:30px 24px
  }

  .hero-photo{
    min-height:380px
  }

  .hero-quote{
    left:22px;
    right:22px;
    bottom:22px
  }

  .hero-quote strong{
    font-size:20px
  }

  .film-section{
    padding-left:22px;
    padding-right:22px
  }

  .film-frame{
    padding:5px
  }

  .hero-clean{
    padding-left:22px;
    padding-right:22px
  }

  .knowledge{
    padding-left:22px;
    padding-right:22px
  }

  .article-hero,
  .article{
    padding-left:22px;
    padding-right:22px
  }
}/* INVESTITION */

.investment{
  padding:110px max(8vw,40px);
  background:
    radial-gradient(circle at 85% 20%,#123844 0,transparent 35%),
    linear-gradient(135deg,#07151d,#0b1d26);
  color:#fff
}

.investment-inner{
  max-width:1180px;
  margin:0 auto
}

.investment h2{
  font-size:clamp(38px,4.5vw,64px);
  max-width:950px
}

.investment-lead{
  max-width:850px;
  color:#b9c8ca;
  font-size:19px;
  margin:0 0 48px
}

.investment-card{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  background:#fff;
  color:#18313a;
  border-top:4px solid #2b9da3;
  box-shadow:0 30px 80px rgba(0,0,0,.25)
}

.investment-price{
  padding:46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid #dce4e2
}

.investment-price small{
  display:block;
  color:#196771;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  margin-bottom:12px
}

.investment-price strong{
  display:block;
  color:#07151d;
  font-size:clamp(38px,4.5vw,58px);
  line-height:1.05;
  letter-spacing:-.035em
}

.investment-price strong span{
  color:#526b72;
  font-size:17px;
  letter-spacing:0;
  font-weight:600
}

.investment-copy{
  padding:42px 46px
}

.investment-copy p{
  color:#405a62;
  font-size:17px;
  margin:0
}

.investment-copy p+p{
  margin-top:20px
}

.investment-copy b{
  color:#18313a
}

.investment-points{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:30px 0 34px;
  color:#a9bec1;
  font-size:14px;
  font-weight:600
}

.investment-points span{
  display:flex;
  align-items:center
}

.investment-points span:before{
  content:'✓';
  color:#63b9bd;
  font-weight:900;
  margin-right:8px
}

.investment-points span+span:before{
  margin-left:28px
}


@media(max-width:900px){

  .investment-card{
    grid-template-columns:1fr
  }

  .investment-price{
    border-right:0;
    border-bottom:1px solid #dce4e2
  }

}


@media(max-width:560px){

  .investment{
    padding:75px 22px
  }

  .investment-lead{
    font-size:17px;
    margin-bottom:34px
  }

  .investment-price,
  .investment-copy{
    padding:30px 25px
  }

  .investment-price strong{
    font-size:40px
  }

  .investment-points{
    display:grid;
    gap:10px
  }

  .investment-points span+span:before{
    margin-left:0
  }

  .investment .btn{
    width:100%
  }

}/* ANKER-NAVIGATION – ABSTAND ZUM STICKY HEADER */

section[id]{
  scroll-margin-top:100px;
}

@media(max-width:900px){
  section[id]{
    scroll-margin-top:82px;
  }
}/* HORIZONTALEN OVERFLOW VERHINDERN */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

main,
section,
header,
footer{
  max-width:100%;
}/* =========================================
   MOBILE RESPONSIVE FIX
   ========================================= */

@media (max-width: 560px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  *,
  *::before,
  *::after{
    max-width:100%;
  }

  main,
  section,
  article,
  header,
  footer{
    width:100%;
    max-width:100%;
  }

  /* Große Überschriften dürfen niemals aus dem Display laufen */
  h1,
  h2,
  h3{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
  }

  h1{
    font-size:clamp(38px,11vw,52px);
    line-height:1.02;
    letter-spacing:-0.035em;
  }

  h2{
    font-size:clamp(32px,9vw,44px);
    line-height:1.05;
  }

  /* Texte und Links */
  p,
  li,
  a{
    overflow-wrap:anywhere;
  }

  /* Bilder und Video */
  img,
  video{
    max-width:100%;
    height:auto;
  }

  /* Grid-Elemente dürfen ihre Spalte nicht verbreitern */
  .hero > *,
  .method > *,
  .report > *,
  .about > *,
  .contact > *,
  .investment-card > *{
    min-width:0;
  }

}@media (max-width: 430px){

  .film-head h2{
    font-size:34px;
    line-height:1.06;
    letter-spacing:-0.035em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:auto;
  }

}
@media (max-width: 560px){

  .legal-inner h1{
    font-size:34px;
    line-height:1.08;
    letter-spacing:-0.025em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:auto;
  }

}
/* =========================================
   MEHR STABILITÄT · MEHR HANDLUNGSSPIELRAUM
   ========================================= */

.value-impact{
  padding:110px max(8vw,40px);
  background:
    radial-gradient(circle at 85% 15%,#123844 0,transparent 32%),
    linear-gradient(135deg,#07151d,#0b1d26);
  color:#fff;
}

.value-impact-head{
  max-width:920px;
  margin-bottom:55px;
}

.value-impact-head h2{
  font-size:clamp(42px,5vw,68px);
  margin-bottom:24px;
}

.value-impact-head p:last-child{
  max-width:850px;
  color:#b9c8ca;
  font-size:19px;
  margin-bottom:0;
}

.value-impact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  max-width:1250px;
  background:#29434c;
}

.value-impact-grid article{
  background:#0b1d26;
  padding:34px;
  min-height:230px;
  border-top:3px solid #2b9da3;
}

.value-impact-grid article > span{
  display:block;
  color:#63b9bd;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  margin-bottom:20px;
}

.value-impact-grid h3{
  font-size:23px;
  line-height:1.15;
  margin:0 0 14px;
  color:#fff;
}

.value-impact-grid p{
  margin:0;
  color:#aebfc2;
  font-size:16px;
  line-height:1.6;
}


/* ZUSATZNUTZEN IM STABILITÄTSREPORT */

.report-benefit{
  margin-top:32px;
  padding:24px 26px;
  background:#e7eeec;
  border-left:4px solid #196771;
  color:#405a62;
  font-size:17px;
  line-height:1.6;
}

.report-benefit b{
  color:#18313a;
}


/* TABLET */

@media(max-width:900px){

  .value-impact-grid{
    grid-template-columns:repeat(2,1fr);
  }

}


/* MOBILE */

@media(max-width:560px){

  .value-impact{
    padding:75px 22px;
  }

  .value-impact-head{
    margin-bottom:36px;
  }

  .value-impact-head h2{
    font-size:38px;
    line-height:1.04;
  }

  .value-impact-head p:last-child{
    font-size:17px;
  }

  .value-impact-grid{
    grid-template-columns:1fr;
  }

  .value-impact-grid article{
    min-height:auto;
    padding:28px 25px;
  }

  .value-impact-grid h3{
    font-size:21px;
  }

  .report-benefit{
    padding:22px;
    font-size:16px;
  }

}